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

Question

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

Answer 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 />").

Answer 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 назначают пространство имен элементу на основе его имени и его элементов-предков, поэтому, чтобы поместить элемент circle в пространство имен svg, его необходимо проанализировать внутри элемента svg.

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

Answer 3

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

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

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