是否可以直接使用 jquery 和 Svg(无插件)? [英] Is it possible to work with jquery and Svg directly (no plugins)?

问题描述

我正在尝试与 Jquery 和 Svg 一起工作.但我不想使用任何插件.

I'm trying to work with Jquery and Svg together. But I don´t want to use any plugin.

我现在处理的问题是，当我尝试使用传统的追加模式将子项添加到 svg 文档时，该对象未呈现.让我们看看我尝试做的事情:

The problem I am dealing now is that when I try to work using the traditional append mode to add a child to the svg document, the object is not rendered. Let´s check out what I tried to do:

/* 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 circle 元素相关的构造函数、原型和其他方法不是这个 'jquery' 圆的一部分，而是与纯 html 标签相关.

...but after this action, the circle does not render. I check if at least the circle was really appended to the DOM tree in the Developers Tool Inspector, and I found out that both element exist, with the proper attributes previously set, but the circle created with jQuery was as if it were a html descendant, not as a svg descendant. This means that the constructors, prototypes and other methods related to a svg circle element was not part of the this 'jquery' circle, but instead the related to a pure html tag.

有没有办法使用 jquery 将 svg 元素创建为 svg 后代，或者尽管生产力下降，但使用纯 javascript 更好?

Is there a way to create svg elements as svg descendants using jquery, or is better the use of pure javascript despite the loss of productivity?

推荐答案

还没能尝试，但我打赌这会奏效.而不是

Haven't been able to try, but I bet this would work. Instead of

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

做

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

如果你打算不止一次这样做，也许

If you plan on doing this more than once, maybe

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

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

这与通过 $(document.createElement("div")) 而不是 $("<div/>") 获得更好性能的老技巧相同.

This is the same as the old trick of getting better performance via $(document.createElement("div")) instead of $("<div />").

这篇关于是否可以直接使用 jquery 和 Svg(无插件)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！