Discussion :

[Thyxx]

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

[NoSmoking]

Bonjour,
je ne connais pas la technique SVG, mais as tu essayé avec firstChild.nodeValue,
ou encore par la méthode de création des éléments createElementNS

[Thyxx]

Merci de la réponse.
Je viens d'essayer avec la méthode createElementNS, j'obtiens le même résultat
Je vais essayer avec firstChild.nodeValue et je donne le résultat.