Можно ли работать с 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, несмотря на потерю производительности?

Ответ 1

Не удалось попробовать, но я уверен, что это сработает. Вместо

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

Do

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

Это то же самое, что и старый трюк получения более высокой производительности с помощью $(document.createElement("div")) вместо $("<div />").

Ответ 2

Это работает в Chrome 11. Не пробовал в других браузерах.

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

Как я понимаю, jQuery анализирует html, передавая строку в собственный HTML-парсер браузера. Правила синтаксического анализа HTML присваивают пространство имен элементу на основе его имени и его элементов-предков, поэтому, чтобы получить элемент окружности в пространстве имен svg, его нужно проанализировать внутри элемента svg.

Итак, здесь он разбирается и добавляется внутри элемента <svg>, а затем разворачивается, чтобы удалить созданный дополнительный элемент svg. Этот шаблон append-and-unwrap несколько уродлив, и я ожидаю, что кто-то с лучшими знаниями jQuery сможет найти более элегантное решение, но концепция достаточно ясна.

Ответ 3

Не используйте jQuery и SVG вместе. jQuery был разработан для манипуляций с DOM, Raphael предназначен для манипуляции SVG.

Используйте Raphael, который является библиотекой JavaScript, которая выполняет SVG для вас.

Вы действительно не должны делать все на своем пути, это просто вызовет проблемы.