Javascript生成的SVG不更新

Question

我有一個腳本，通過jQuery向內聯SVG圖像添加元素，但新元素似乎沒有顯示出來。輸出完全有效;我可以將它複製到原始文件中，重新加載它，它會呈現得很好。但是當腳本生成它時，新元素不可見。

這裏是複製問題的一個片段：http://tinkerbin.com/7OmDWlsz

提前感謝！

Answer 1

如果元素不在svg名稱空間中，您將不會看到任何svg輸出。

嘗試用這種替代你的腳本片段：

var slices = 10; 

for(i = 0; i < 360; i += 360/slices) { 
    var element = document.createElementNS("http://www.w3.org/2000/svg", "polyline"); 
    element.setAttribute("points", "0,0 -10,100 10,100"); 
    element.setAttribute("transform", "rotate(" + i + ")"); 
    $('#rotate').append(element); 
} 

Answer 2

謝謝多少@Erik達爾斯特倫，我可以把它添加了貢獻。下面是我爲了打造SVG樹定義函數：

Node.prototype.svg_grow = function(node_name, node_attr) { 
    n = document.createElementNS("http://www.w3.org/2000/svg", node_name); 
    this.appendChild(n); 
    if (typeof node_attr !== 'undefined') { 
     for (key in node_attr) { 
      n.setAttribute(key, node_attr[key]); 
     } 
    } 
    return n; 
} 

所以，你可以只使用svg_grow()任何像這樣的節點上：

s_g = document.getElementById("parent"); 
s_rect = s_g.svg_grow('rect', {x:0, y:0, width:480, height:640}); 

這只是做：

<g id="parent"> 
    <rect x="0" y="0" width="480" height="640" /> 
</g>