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

[phpdoesnotcare]

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 :



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.

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

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

[mekal]

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

[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 console :

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