Bonsoir, après avoir cherché en vain une section SVG, je poste mon problème dans ce topic.

Je cherche à créer une infobulle au survol d'un secteur SVG.
Je voudrais donc modifier la valeur de l'infobulle en fonction du secteur. Jusque là tout fonctionne, j'obtiens le résultat:
Champ1:XXX Champ2:XXX Champ3:XXX Champ4:XXX

Mais je voudrais obtenir ceci:
Champ1:XXX
Champ2:XXX
Champ3:XXX
Champ4:XXX

Comme je modifie le contenu texte d'une balise <text>, je cherche à le faire grâce aux balises <tspan>.

Voici mon code actuel:

Balise dans le HTML:
Code : Sélectionner tout - Visualiser dans une fenêtre à part
<text id="ZoneInfobulle" fill-opacity="0">Zone de texte</text>
Fonction Javascript:
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
              svgdoc = evt.target.ownerDocument;  //Récupération de l'évènement
			var objet = svgdoc.getElementById("ZoneInfobulle");  //Identification de l'objet à modifier
			var child = objet.firstChild;  
 
			affichage = "Champ1:XXX<tspan>Champ2:XXX</tspan><tspan>Champ3:XXX</tspan><tspan>Champ4:XXX</tspan>";
 
			child.data = affichage;  //Modification
Le problème c'est que les balises n'ont pas d'effets et que le balises apparaissent dans l'infobulle, donc je voie ceci:
<tspan>Champ1:XXX</tspan><tspan>Champ2:XXX</tspan><tspan>Champ3:XXX</tspan><tspan>Champ4:XXX</tspan>
Pouvez m'aider à rendre ces balises actives ?

Cordialement