追加路徑的孩子使用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);