javascript - 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 Dahlström，我可能会对此有所贡献。这是我为构建 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>