追加路径的孩子使用JavaScript

Question

美好的一天，

我有创造的路径和使用“的appendChild”的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

命名空间需要为“http://www.w3.org/2000/svg”，而不是“createElementNS”调用中的“SVG”。

Answer 2

这里有两个问题：

1. 前面已经指出的那样，你必须使用完整的命名空间的URI，所以在这种情况下：

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

2. 属性也需要与设置记住命名空间。好消息是，你可以在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);