1633 sujets

Formats, encodage, internationalisation, XML

[Résolu] Ajout d'un noeud dans XML... impossible avec SVG ?

Bonjour,

C'est très bizarre, car voyez-vous la présente fonction permettant d'ajouter un noeud dans une structure via DOM semble ne pas fonctionner sur de l'SVG.

Voici mon cas. J'ai une page index.xhtml :
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<script type="text/javascript" src="add.js"></script>
</head>
<body>
<h1 id="ici_ca_marche">Foo</h1>
<hr />
<p>
<button onclick="add();">Add</button>
</p>
<hr />
<svg xmlns="http://www.w3.org/2000/svg" width="600" height="400">
  <g id="ici_ca_ne_marche_pas">
    <circle cx="150" cy="100" r="50" style="fill: black;" />
  </g>
</svg>
</body>
</html>


Et j'ai un fichier décrivant ma fonction :
function add() {
	var bar = document.createElement("circle");
	bar.setAttribute("cx", "100");
	bar.setAttribute("cy", "110");
	bar.setAttribute("r", "60");
	bar.setAttribute("style", "fill:yellow;");
	document.getElementById('ici_ca_ne_marche_pas').appendChild(bar);
}


Comme vous pouvez le voir, le but du script est juste d'ajouter
a écrit :
<circle cx="100" cy="110" r="50" style="fill:yellow;"/>
dans le bloc identificable par ici_ca_ne_marche_pas. Et ça ne marche pas.
En revanche, si j'essaye d'ajouter ça dans le bloc ici_ca_marche... ça marche Smiley sweatdrop

Il en est ainsi pour Firefox 2 et Opera. Et en passant par 
document.getElementById('ici_ca_ne_marche_pas').innerHTML = "<circle cx="100" cy="110" r="50" style="fill:yellow;"/>";
le problème reste le même Smiley confus

Néanmoins, j'ai constaté une chose étonnante : après avoir cliqué sur le bouton Add dans Firefox 2, il est possible de voir que le nouveau noeud a bien été ajouté dans la structure moyennant une sélection de la page et un affichage de la source de cette sélection. En voici une copie :
<h1 id="ici_ca_marche">Foo</h1>
<hr/>
<p>
<button onclick="add();">Add</button>
</p>
<hr/>
<svg xmlns="http://www.w3.org/2000/svg" width="600" height="400">
  <g id="ici_ca_ne_marche_pas">
    <circle cx="150" cy="100" r="50" style="fill: black;"/>
  <circle cx="100" cy="110" r="60" style="fill: yellow;"/></g>
</svg>


Donc en gros, la mise à jour de l'image SVG a bien eu lieu... mais elle n'est pas visible. Etrange... Smiley eek

Si vous voulez tester chez vous, n'hésitez pas. Et si vous avez une idée, alors là ça serait génial Smiley lol

Merci bcp

T5in9Tao
Modifié par tsing (10 Jun 2007 - 10:55)
bonsoir ... presque jour !

lors de ta creation de l'élémnet qui contiendra les attributs il faut préciser l'espace de
nom SVG .
Ainsi dans ta fonction : 


function add() {
                // variable locale
                var svgns = "http://www.w3.org/2000/svg";
                // creation de l'elment
	var bar = document.createElementNS(svgns,"circle");
                // ajout des attributs 
	bar.setAttributeNS(null,"cx", "100");
	bar.setAttributeNS(null,"cy", "110");
	bar.setAttributeNS(null,"r", "60");
	bar.setAttributeNS(null,"fill", "yellow");

	document.getElementById('ici_ca_ne_marche_pas').appendChild(bar);
}


Attention au mélange 'en ligne ' du (X)html et Svg , qui reste problématique ( application/xml) , et ce surtout avec une extension .xhtml .

la solution la plus compatible est le document svg inclus (embed ou object) et la liaison entre les 2 documents
Merci beaucoup kzone ! J'étais loin d'y arriver. Ca fonctionne beaucoup mieux avec ton code Smiley ravi

En naviguant un peu, j'ai trouvé cette page où un exemple d'insertion de SVG avec <object> est proposé. Mais en l'adaptant à ma page, ma fonction ne fonctionne plus car il semble que
a écrit :
document.getElementById('ici_ca_ne_marche_pas')
ne trouve plus l'image (étant dans un fichier à part).
En tout cas, mon problème initial est maintenant résolu Smiley biggrin
Sujet clos
Aller à