Можно ли работать с jquery и Svg напрямую (без плагинов)?

Я пытаюсь работать вместе с JQuery и Svg. Но я не хочу использовать какой-либо плагин.

Проблема, которую я сейчас имею в виду, заключается в том, что когда я пытаюсь работать с использованием традиционного режима добавления, чтобы добавить ребенка в документ svg, объект не отображается. Давайте посмотрим, что я пытался сделать:

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

... но после этого действия круг не отображает. Я проверяю, был ли по крайней мере круг прикреплен к дереву DOM в инспекторе разработчиков, и я обнаружил, что оба элемента существуют с соответствующими ранее установленными атрибутами, но круг, созданный с помощью jQuery, был таким, как если бы он был потоком html, а не как потомок svg. Это означает, что конструкторы, прототипы и другие методы, связанные с элементом окружности svg, не были частью этого круга "jquery", а вместо этого связаны с чистым тегом html.

Есть ли способ создать svg-элементы как svg-потомки с использованием jquery или лучше использовать чистый javascript, несмотря на потерю производительности?

Ответы

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