是否可以直接使用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元素作为使用jquery的svg后代，还是更好地使用纯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"));
这与通过$(document.createElement("div"))而不是$("<div />")获得更好性能的旧技巧相同。
这适用于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元素。 这个append-and-un-wrap模式有点难看，我期望有更好的jQuery知识的人可以找到更优雅的解决方案，但这个概念已经足够清晰了。
不要一起使用jQuery和SVG。 jQuery是为DOM操作而设计的，Raphael专为SVG操作而设计。
使用Raphael，这是一个为您提供SVG的JavaScript库。
你真的不应该尽一切努力，这只会导致问题。
链接地址: http://www.djcxy.com/p/53415.html上一篇: Is it possible to work with jquery and Svg directly (no plugins)?