Modifier une zone de texte SVG en JavaScript [infobulle]

Modifier une zone de texte SVG en JavaScript [infobulle] - HTML/CSS - Programmation

Marsh Posté le 21-04-2012 à 20:20:14    

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 :
  1. <text id="ZoneInfobulle" fill-opacity="0">Zone de texte</text>


 
Fonction Javascript:

Code :
  1. svgdoc = evt.target.ownerDocument;  //Récupération de l'évènement
  2.   var objet = svgdoc.getElementById("ZoneInfobulle" );  //Identification de l'objet à modifier
  3.   var child = objet.firstChild; 
  5.   affichage = "Champ1:XXX<tspan>Champ2:XXX</tspan><tspan>Champ3:XXX</tspan><tspan>Champ4:XXX</tspan>";
  7.   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

Reply

Marsh Posté le 21-04-2012 à 20:20:14   

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed