Modifier une zone de texte SVG en JavaScript [infobulle]
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:
<text id="ZoneInfobulle" fill-opacity="0">Zone de texte</text>
Fonction Javascript:
Code:
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:
Citation:
<tspan>Champ1:XXX</tspan><tspan>Champ2:XXX</tspan><tspan>Champ3:XXX</tspan><tspan>Champ4:XXX</tspan>
Pouvez m'aider à rendre ces balises actives ?
Cordialement
