動態創建的SVG元素不顯示

我想繪製一個純JavaScript的SVG矩形。它沒有顯示出來。動態創建的SVG元素不顯示

但是，當我在瀏覽器控制檯中運行document.getElementById('rect1')時，存在矩形元素。當我將HTML從控制檯複製並粘貼到HTML文件時，該矩形顯示正確。所以看起來好像是正確的代碼被添加到文檔中，但是元素沒有被顯示。

HTML：

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="UTF-8" /> 
    </head> 
    <body> 
    <div> 
     <svg id="test" width="500" height="500"> 
      <!-- code copied from browser console works 
      <rect x="30" y="60" width="50" height="80" style="stroke:#000000; fill:none;" id="rect1"> 
     </rect> --> 
    </svg> 

     <svg id="main" width="500" height="500"></svg> 
    </div> 
    <script src="./src/shapes.js"></script> 
    </body> 
</html>

的JavaScript：

function addSvgElement() { 
    var rect = document.createElement("rect"); 
    rect.setAttribute('x', 30); 
    rect.setAttribute('y', 60); 
    rect.setAttribute('width', 50); 
    rect.setAttribute('height', 80); 
    rect.setAttribute('style', "stroke:#000000; fill:none;"); 
    rect.id = "rect1"; 
    var svg = document.getElementById('main'); 
    svg.appendChild(rect); 
} 

addSvgElement(); // adds correct code, but element doesn't show up

來源

2014-05-11 Patrick Brinich-Langlois

看起來像它的工作原理... HTTP：的//jsfiddle.net/fpG4Z/ – sfletche

可能重複（http://stackoverflow.com/questions/1034712/creating- [使用JavaScript創建SVG圖形？] sfg-graphics-using-javascript） –

@sfletche對不起，我沒有說清楚，生成矩形的HTML文件中的代碼是從瀏覽器控制檯複製並粘貼到文檔中進行調試的。不過，我想動態生成矩形。 –

document.createElement("rect");將創建一個未知的HTML DOM元素。您必須使用正確的名稱空間來創建SVG DOM元素。

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

來源

2014-05-11 02:47:29

動態創建的SVG元素不顯示

回答

相關問題