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

Auteur
tsing	# 09 Jun 2007 - 21:48:45
user.T5in9Tao['']; 67 Posts	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 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 Merci bcp T5in9Tao Modifié par tsing (10 Jun 2007 - 10:55)
user.T5in9Tao['']; 67 Posts
kzone	# 10 Jun 2007 - 04:49:11
906 Posts	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 On peut rire de tout, mais pas avec n'importe qui ! (Desproges)
906 Posts
tsing	# 10 Jun 2007 - 10:55:17
user.T5in9Tao['']; 67 Posts	Merci beaucoup kzone ! J'étais loin d'y arriver. Ca fonctionne beaucoup mieux avec ton code 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 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
user.T5in9Tao['']; 67 Posts

Les références web : openweb.eu.org - opquast.com - webmaster-hub.com - webrankinfo.com - salemioche.net - web-pour-tous.org - webonorme.org

Nos partenaires : Editions Eyrolles