Forums : Xul, Xbl, JS...

Aller à la discussion : Plus récente Plus ancienne

# Ajout dynamique d'un noeud dans SVG... impossible à visionner ?

Envoyé par : t5in9tao

Date : 09/06/2007 23:05

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

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

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

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

Merci bcp

T5in9Tao

# Re: Ajout dynamique d'un noeud dans SVG... impossible à visionner ?

Envoyé par : t5in9tao

Date : 10/06/2007 10:10

Voilà la solution :

// variable locale
var svgns = "http://www.w3.org/2000/svg";
// creation de l'element
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);

Merci à kzone pour l'avoir trouvé et excellent week end à tous.

# Re: Ajout dynamique d'un noeud dans SVG... impossible à visionner ?

Envoyé par : Paul Rouget

Date : 11/06/2007 11:50

le setAttributeNS ne doit pas être nécessaire.

Il n'est plus possible de poster des messages dans ce forum.