Question

我无法弄清楚为什么svg元素只被追加一次，而我要求在循环中追加它三次？这是代码：

var svgchart = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svgchart.setAttribute('style', 'border: 1px solid grey');
svgchart.setAttribute('class', 'chart');
svgchart.setAttribute('width',100);
svgchart.setAttribute('height',100);
svgchart.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink", "http://www.w3.org/1999/xlink");
 var test=[2,6,8];
 for (var i=0; test.length>i; i++)
 {
     var svgappend=document.getElementById("test");
     svgappend.appendChild(svgchart);
 }

这是jsfiddle - http://jsfiddle.net/ASvb3/

谢谢！

Answer 1

问题是appendChild会附加那个确切的子项。所以它将svg元素移动到新的父元素。要解决此问题，您需要创建一个新的svg元素并插入它。所以创建svg的代码也应该在循环中：

 var test=[2,6,8];
 for (var i=0; test.length>i; i++)
 {
    var svgchart = document.createElementNS("http://www.w3.org/2000/svg", "svg");
    svgchart.setAttribute('style', 'border: 1px solid grey');
    svgchart.setAttribute('class', 'chart');
    svgchart.setAttribute('width',100);
    svgchart.setAttribute('height',100);
    svgchart.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink", "http://www.w3.org/1999/xlink");
     var svgappend=document.getElementById("test");
     svgappend.appendChild(svgchart);
 }

http://jsfiddle.net/GolezTrol/ASvb3/1/

如果使用JQuery，可以使用clone()方法克隆svg元素。

如何正确地将几个svg元素附加到html文档？

1 个答案: