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

我正在尝试将Jquery和Svg结合使用。但是我不想使用任何插件

我现在要处理的问题是，当我尝试使用传统的append模式向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" );

/*使用纯JS创建svg容器*/
var container=document.getElementById（“svg_空间”）；
mySvg=document.createElements（“http://www.w3.org/2000/svg“，“svg”）；
setAttribute（“版本”，“1.2”）；
setAttribute（“baseProfile”、“tiny”）；
container.appendChild（mySvg）；
/*使用纯JS向SVG容器添加子级并设置属性*/
圆圈=document.createElements（“http://www.w3.org/2000/svg“，”圆圈“）；
Circle.setAttribute（“cx”、“60”）；
圆圈.setAttribute（“cy”，“30”）；
圆.setAttribute（“r”、“13”）；
Circle.setAttribute（“class”、“class1”）；
mySvg.appendChild（圆）；/*在此之后，将渲染圆*/
/*然后，我尝试使用jQuery执行相同的操作*/
$（mySvg）。追加（“”）；
$（mySvg.find（“circle”）.attr（“cx”，“160”）；
$（mySvg.find（“circle”）.attr（“cy”，“70”）；
$（mySvg.find（“circle”）.attr（“r”，“30”）；
$（mySvg.find（“circle”）.attr（“class”，“class1”）；

…但在此操作之后，圆不会渲染。我在Developers Tool Inspector中检查是否至少这个圆真的附加到了DOM树中，我发现这两个元素都存在，并且之前设置了正确的属性，但是使用jQuery创建的圆就像是html子体，而不是svg子体。这意味着和svg循环元素相关的构造函数、原型和其他方法不属于这个“jquery”循环，而是和纯html标记相关

---

有没有一种方法可以使用jquery将svg元素创建为svg子体，或者在生产力下降的情况下使用纯javascript更好？

这在Chrome11中有效。没有在其他浏览器中尝试过

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

$（mySvg）.append（“”）；
$（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元素内对其进行解析

---

因此，在这里，它被解析并附加到

元素中，然后调用unwrap来删除创建的额外svg元素。这种附加和展开模式有点难看，我希望拥有更好jQuery知识的人能够找到一个更优雅的解决方案，但概念已经足够清楚了。

还没有尝试过，但我打赌这会奏效。而不是

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

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

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

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

---

这与通过

$（document.createElement（“div”）

而不是

$（“”）

获得更好性能的老技巧相同。不要同时使用jQuery和SVG。jQuery是为DOM操作而设计的，Raphael是为SVG操作而设计的

使用一个JavaScript库，它为您提供SVG

---

你真的不应该把每件事都做得很艰难，这只会造成问题。

>我正在尝试将Jquery和Svg结合起来使用。但是我不想使用任何插件你能描述一下原因吗？现有的插件和库有很好的文档、示例、结构。。。例如，看看。您是否知道

.attr（）

可以获取具有键值对的JavaScript对象？例如，你可以只做

$（mySvg）.find（“circle”）.attr（{cx:160，cy:70，r:30，class:“class1”）这不是一个跨浏览器的问题，因为我在几个浏览器中测试了它。我知道前提可能是“没有插件”，但如果您对SVG（或其他XML）进行大量修改，您可能会喜欢这个相当简单的问题：
$（svgEl（tagname））
允许您在追加之前调用类似
attr
的方法
function svgEl(tagName) {
    return document.createElementNS("http://www.w3.org/2000/svg", tagName);
}

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