Est-il possible de travailler avec jquery et Svg directement (pas de plugins)?

J'essaie de travailler ensemble avec Jquery et Svg. Mais je ne veux pas utiliser de plugin.

Le problème que je traite maintenant est que lorsque j'essaie de travailler en utilisant le mode d'ajout traditionnel pour ajouter un enfant au document svg, l'objet n'est pas rendu. Voyons ce que j'ai essayé de faire:

/* Creating the svg container using pure JS */ var container = document.getElementById("svg_space"); mySvg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); mySvg.setAttribute("version", "1.2"); mySvg.setAttribute("baseProfile", "tiny"); container.appendChild(mySvg); /* Adding a child and setting attributes to the SVG container using pure JS */ Circle = document.createElementNS("http://www.w3.org/2000/svg", "circle"); Circle.setAttribute("cx", "60"); Circle.setAttribute("cy", "30"); Circle.setAttribute("r", "13"); Circle.setAttribute("class", "class1"); mySvg.appendChild(Circle); /* After this, the circle is rendered */ /* Then, I tried to use jQuery to perform the same action... */ $(mySvg).append("<circle />"); $(mySvg).find("circle").attr("cx","160"); $(mySvg).find("circle").attr("cy","70"); $(mySvg).find("circle").attr("r","30"); $(mySvg).find("circle").attr("class","class1" ); 

… mais après cette action, le cercle ne se rend pas. Je vérifie si au moins le cercle a été vraiment ajouté à l'arborescence DOM dans l'inspecteur des outils développeurs, et j'ai découvert que les deux éléments existent, avec les attributs appropriés précédemment définis, mais le cercle créé avec jQuery était comme s'il s'agissait d'un descendant html , Pas comme descendant svg. Cela signifie que les constructeurs, les prototypes et les autres méthodes liées à un élément de cercle svg ne faisaient pas partie du cercle 'jquery' de cette forme, mais plutôt de la pure étiquette html.

Existe-t-il un moyen de créer des éléments svg en tant que descendants svg à l'aide de jquery, ou est-ce que l'utilisation du javascript pur est meilleure malgré la perte de productivité?

• Désélectionner le contenu d'une zone de texte avec javascript
• Existe-t-il un moyen de vérifier si deux éléments DOM sont égaux?
• OuterHTML d'un élément SVG
• Comment identifier quand le DOM a été modifié?
• Comment obtenir l'index actuel dans la carte prototype Array?

• JavaScript: comment obtenir un élément parent par sélecteur?
• Comment puis-je obtenir la taille de la police d'un élément tel qu'il a été défini par css
• Est-ce que je peux trouver à partir d'une méthode javascript, quel élément de DOM m'a appelé?
• L'analyse par DOM provoque tous les enfants et les valeurs
• Scraper des données générées dynamiquement par JavaScript dans un document html à l'aide de C #

 $(mySvg).append("<circle />"); 

 $(mySvg).append(document.createElementNS("http://www.w3.org/2000/svg", "circle")); 

 function svgEl(tagName) { return document.createElementNS("http://www.w3.org/2000/svg", tagName); } $(mySvg).append(svgEl("circle")); 

 $(mySvg).append("<svg><circle /></svg>"); $(mySvg).find("circle").unwrap(); $(mySvg).find("circle").attr("cx","160"); $(mySvg).find("circle").attr("cy","70"); $(mySvg).find("circle").attr("r","30"); $(mySvg).find("circle").attr("class","class1" );