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>