Obligation d'ajouter des éléments d'un seul coup

Version imprimable

13/12/2011, 23h23
phpdoesnotcare

Obligation d'ajouter des éléments d'un seul coup
Bonjour,

désolé pour le titre, j'avoue ne pas trop avoir trop su comment intituler ce sujet.

Voilà, j'essaie d'insérer du texte (via la balise TEXT) dans un élément SVG. En travaillant, je suis tombé sur un résultat qui m'a plutôt surpris :

Code:

$("#schedule").append('<svg id="test2" xmlns="http://www.w3.org/2000/svg" version="1.1"><text transform="rotate(30 0 0)">blabla</text></svg>');

Ce code marche sans problème.
Code:

1 2 $("#schedule").append('<svg id="test1" xmlns="http://www.w3.org/2000/svg" version="1.1"></svg>'); $("#test1").append('<text transform="rotate(30 0 0)">blabla</text>');
Celui-ci, pas vraiment.

Mon problème est que le deuxième code n'affiche rien à l'écran, alors que l'élément TEXT semble bien avoir été ajouté, comme le montre cette capture d'écran :

http://f.cl.ly/items/3A3o1o0T3a1I3I0...20.44%20PM.png

J'avoue ne pas comprendre ce qui différencie les deux codes, et pourquoi j'obtiens un résultat différent. Si quelqu'un pouvait m'éclaircir sur ce point, je lui en serais grandement reconnaissant.

Merci d'avance.
14/12/2011, 01h16
danielhagnoul

Bonsoir

jQuery peut manipuler le HTML, mais pas le SVG. De plus le DOM HTML est différent de celui du SVG.

Dans le premier cas, vous insérer un texte qui contient un code SVG complet et c'est le navigateur qui fait le travail pour produire du SVG. Dans le deuxième cas, vous introduisez simplement un texte dans la page.

J'ai passé un peu de temps pour fouiller l'Internet à la recherche d'une hypothétique solution miracle, mais je n'ai rien trouvé de convaincant.
14/12/2011, 01h39
phpdoesnotcare

Ca explique tout, alors. Merci beaucoup !

Aucune chance de pouvoir modifier la rotation d'un élément text via javascript, alors ? (même sans passer par jQuery)

Ici, par exemple, ils semblent parler de le faire.

dans l'exemple que tu montre il uyilise le dom

en dom sa donne ca

Code:

1
2
3
4
5
6
7
8
9
10
var gvs=document.createElement('svg');
gvs.setAttribute('xmlns','http://www.w3.org/2000/svg" version="1.1');
gvs.id='test1'
 
var txt=document.createElement('text');
txt.setAttribute('transforme','rotate(30 0 0)');
txt.firstChild.nodeValue='blabla'
 
gvs.appendChild(txt);
document.getElementById("schedule").appendChild(gvs);

14/12/2011, 20h44
Watilin
Ton script ne marche pas Mekal :/

Je me suis déjà heurté à la barbarie du DOM SVG. J'avais abandonné assez vite, mais je me souviens qu'il faut utiliser createElementNS pour que l'élément soit reconnu comme une balise SVG.
Code:

1 2 3 4 >>> document.createElement('text').constructor HTMLUnknownElement {} >>> document.createElementNS('http://www.w3.org/2000/svg', 'text').constructor SVGTextElement {}
Je vais me replonger dedans je crois :mrgreen: