Question

美好的一天，

我在使用＆＃34; appendChild＆＃34;创建路径并显示它时遇到了难以置信的困难。在SVG元素中。

我必须遗漏一些非常简单的东西，因为我已经倾注了W3C的规格，w3schools.com，各种帖子以及各种方式尝试忍者谷歌。

我在FireFox和Chrome中进行测试。

我有一个简单的svg文件：

<svg xmlns:svg ... id="fullPageID">
 <image id="timer1" x="100" y="100" width="100px" height="100px" xlink:href="../component/timer/timer1.svg" />  
 <image id="battery1" x="200" y="200" width="100px" height="100px" xlink:href="../component/battery/30x20_ochre.svg" />
 <script xlink:href="pathMaker.js" type="text/javascript" id="pathMaker" />  
</svg>

我尝试使用的脚本如下：

newpath = document.createElementNS("SVG","path");  
newpath.setAttribute("id", "pathIdD");  
newpath.setAttribute("d", "M 1,97.857143 C 19.285714,96.428571 24.016862,131.64801 90.714286,132.85714 140.78762,133.7649 202.79376,66.16041 202.79376,66.16041");  
newpath.setAttribute("stroke", "black");  
newpath.setAttribute("stroke-width", 3);  
newpath.setAttribute("opacity", 1);  
newpath.setAttribute("fill", "none");

document.getElementById("fullPageID").appendChild(newpath);

我只是想做一些简单的工作。我错误地认为我不需要像Library to generate SVG Path with Javascript?那样复杂的解决方案吗？

谢天谢地。

Answer 1

有两个问题：

正如已经指出的那样，你必须使用完整的命名空间uri，所以在这种情况下：
```
newpath = document.createElementNS('http://www.w3.org/2000/svg',"path");  
```

还需要在设置名称空间时设置属性。好消息是你可以传递null作为命名空间uri，所以：

newpath.setAttributeNS(null, "d", "M 1,97.857143 C 19.285714,96.428571 24.016862,131.64801 90.714286,132.85714 140.78762,133.7649 202.79376,66.16041 202.79376,66.16041");

此外，这里有两种方法可以更轻松地处理svg命名空间（假设它是一个独立的svg，没有嵌入HTML中）：

要引用svg元素，而不是为其提供ID，您可以使用document.rootElement。
document.rootElement.getAttribute(null, "xmlns")返回一个空字符串（请求其他属性使用此方法时可以正常工作。请使用document.rootElement.namespaceURI。

因此，在您的代码中，您可以进行以下重写：

自：

 newpath = document.createElementNS("http://www.w3.org/2000/svg","path");

要：

 newpath = document.createElementNS(document.rootElement.namespaceURI,"path");

要附加元素，您可以从：

document.getElementById("fullPageID").appendChild(newpath);

为：

document.rootElement.appendChild(newpath);

所以最终的剧本是：

newpath = document.createElementNS(document.rootElement.namespaceURI,"path");  
newpath.setAttributeNS(null, "id", "pathIdD");  
newpath.setAttributeNS(null, "d", "M 1,97.857143 C 19.285714,96.428571 24.016862,131.64801 90.714286,132.85714 140.78762,133.7649 202.79376,66.16041 202.79376,66.16041");  
newpath.setAttributeNS(null, "stroke", "black"); 
newpath.setAttributeNS(null, "stroke-width", 3);  
newpath.setAttributeNS(null, "opacity", 1);  
newpath.setAttributeNS(null, "fill", "none");

document.rootElement.appendChild(newpath);

Answer 2

名称空间必须是“http://www.w3.org/2000/svg”，而不是createElementNS来电中的“SVG”。

Answer 3

你可以得到一个免费的命名空间，并通过简单地将一个路径元素放入其中，使用一个 id 来隐藏它，然后克隆它来偷偷摸摸。下面是一个使用 jQuery 的例子：

HTML

<svg ...>
  <path id="pathFactory"></path>
</svg>

CSS

#pathFactory {
  display: none;
}

Javascript

var path = $('#pathFactory').clone().removeAttr('id');

您的路径变量现在是一个完全有效的路径，具有适当的命名空间，未隐藏并准备好附加到 svg。

使用Javascript在SVG中追加路径子

3 个答案: