¿Es posible trabajar con jquery y Svg directamente (sin complementos)?

Question

Estoy tratando de trabajar con Jquery y Svg juntos. Pero no quiero usar ningún complemento.

El problema que estoy tratando ahora es que cuando trato de trabajar usando el modo tradicional de agregar para agregar un elemento secundario al documento svg, el objeto no se representa. Veamos lo que traté de hacer:

/* 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"); 

... pero después de esta acción, el círculo no se procesa. Compruebo si al menos el círculo realmente se agregó al árbol DOM en el Inspector de herramientas de desarrolladores, y descubrí que ambos elementos existen, con los atributos correctos previamente establecidos, pero el círculo creado con jQuery era como si fuera un descendiente html , no como un descendiente svg. Esto significa que los constructores, prototipos y otros métodos relacionados con un elemento del círculo svg no formaban parte del círculo 'jquery', sino que estaban relacionados con una etiqueta html pura.

¿Hay alguna manera de crear elementos svg como svg descenddants utilizando jquery, o es mejor el uso de javascript puro a pesar de la pérdida de productividad?

Answer 1

No he podido probar, pero apuesto a que esto funcionaría. En lugar de

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

hacer

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

Si planea hacer esto más de una vez, tal vez

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

$(mySvg).append(svgEl("circle")); 

Este es el mismo que el viejo truco de conseguir un mejor rendimiento a través de $(document.createElement("div")) vez de $("<div />").

Answer 2

Esto funciona en Chrome 11. No lo he intentado en otros navegadores.

$(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"); 

Como yo lo entiendo, jQuery análisis sintáctico de HTML pasando la cadena de analizador HTML nativo del navegador. Las reglas de análisis de HTML asignan un espacio de nombre al elemento en función de su nombre y sus elementos ancestrales, por lo que para obtener el elemento del círculo en el espacio de nombres svg, debe analizarse dentro de un elemento svg.

Por lo tanto, aquí se analiza y anexa dentro del elemento <svg> y luego se desenvuelve para eliminar el elemento svg creado. Este patrón de agregar y desenvolver es algo desagradable, y espero que alguien con mejor conocimiento de jQuery pueda encontrar una solución más elegante, pero el concepto es lo suficientemente claro.

Answer 3

No use jQuery y SVG juntos. jQuery fue diseñado para la manipulación DOM, Raphael está diseñado para la manipulación de SVG.

Use Raphael que es una biblioteca de JavaScript que hace SVG para usted.

Realmente no deberías hacer todo de la manera difícil, solo va a causar problemas.