svg changer le text d'une balise text

Version imprimable

24/09/2008, 12h55
elekis

svg changer le text d'une balise text

bonjour,

j'ai un fichier svg dans lequel j'aimerais changer le text lorsque que je click sur un bouton.

Code:

<text id="tooltipText" x="0" y="0" >bleblz</text>

j'aimerais changer le texte avec du code javascript
je recupere la balise avec

Code:

texte = svgdoc.getElementById("tooltipText");

mais apres??? comment faire ??
j'ai essayer innerSVG et innerHTML j'ai essayer d'autre truc, mais cela marche pas.

qqn pourrais t il me dire comment faire?

merci

a++

je mets ici les codes complets parce que je commence à bloquer complètement

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<?xml  version="1.0"  encoding="UTF-8"  standalone="no" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"[<!ATTLIST svg xmlns:xlink CDATA  #FIXED "http://www.w3.org/1999/xlink"
>
]><!--  Generated by Graphviz version 2.18 (Fri Mar 28 18:30:32 GMT 2008) -->
<!--  Title: _anonymous_0 Pages: 1  -->
<svg width="1498pt" height="224pt" viewBox="0.00 0.00 1498.00 224.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" onload="recupereSVGDoc(evt)">
<script xlink:href="generalgraph.js" type="text/ecmascript" />
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 220)" onclick="afficheTooltip(evt,&apos;ppooo&apos;)" >
<title>_anonymous_0</title>
<polygon
 style="fill:white;stroke:white;"
 points="-4,4 -4,-220 1494,-220 1494,4 -4,4"
/>
<g
 id="node1"
 class="node"
 onclick="afficheTooltip(evt,&apos;mon petit text :D &apos;)"
>
<title>
ADDR</title>
<polygon
 style="fill:#030303;stroke:#030303;"
 points="563,-205 419,-205 419,-83 563,-83 563,-205"
/>
</g>
</g>
 
 
        <rect id="tooltipRect" x="0" y="0" rx="5" ry="5" width="100" height="16" style="visibility: hidden" />
        <text id="tooltipText" x="0" y="0" style="visibility: hidden"></text>	
 
 
</svg>

et js

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var svgdoc;
function recupereSVGDoc(evt) {
   svgdoc  = evt.target.ownerDocument;
   }
 
   function afficheTooltip(evt,text) 
   {
                        var rectangle, texte;
 
                        texte = svgdoc.getElementById("tooltipText");
 
                        texte.firstChild.nodeValue = text;
 
                        texte.setAttribute("style", "fill: rgb(255,131,9); font-size: 11px; visibility: visible");
                        texte.setAttribute("x", evt.clientX+3);
                        texte.setAttribute("y", evt.clientY-8);
 
                        rectangle = svgdoc.getElementById("tooltipRect");
                        rectangle.setAttribute("style", "fill: #FFEBD5; stroke: #FF8309; stroke-width: 0.5px; visibility: visible");
                        rectangle.setAttribute("x", evt.clientX);
                        rectangle.setAttribute("y", evt.clientY-20);
                        rectangle.setAttribute("width",texte.getComputedTextLength()+6);
    }

voila

merci

a+

02/09/2009, 10h17
Bownobo
Salut Elekis je suis en train de découvrir GraphViz avec son wrapper PHP, Image_GraphViz de PEAR et j'aimerai savoir comment tu as fait pour ajouter la ligne suivante dans le svg généré par GraphViz
Code:

1 2 <script xlink:href="generalgraph.js" type="text/ecmascript" />
Merci

Salut,

Je n'ai pas regardé le code de ton 2ème message, mais d'après ce que tu dis dans le 1er, il n'y a rien de très compliqué si tu connais un peu l'API DOM :
Code:

1 2 3 4 var tooltipText = svgdoc.getElementById("tooltipText"); tooltipText.removeChild(tooltipText.firstChild); // si tu n'as pas mis d'espace ou de retour à la ligne tooltipText.appendChild(document.createTextNode("le nouveau texte"));
J'espère avoir répondu à ta question ;)