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 :
- 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
