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

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

Answer 1

一直无法尝试，但我敢打赌这会起作用。而不是

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

这与通过$(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操作而设计，Raphael专为SVG操作而设计。

使用Raphael这是一个为您执行SVG的JavaScript库。

你真的不应该以艰难的方式做所有事情，这只会导致问题。

是否可以直接使用jquery和Svg（没有插件）？

3 个答案: