Question

我有一个包含<SVG>元素代码的数组。如何使用JavaScript追加到它。我尝试了以下方法：

示例数组：

global_array[0] = [ '<svg data="BusinessProductFigure" x="553.671875"
y="167" id= "something" xmlns="http://www.w3.org/2000/svg" 
version="1.1"><rect x="4" y="4" width="60" height="14" 
fill="rgb(299,299,162)" stroke-linejoin="round" 
stroke="rgb(299,299,162)" stroke-width="1"/></svg>' ]

追加[1]

for(var i = 0; i <= global_array.length; i++) {
    document.getElementById("main_svg").innerHTML = global_array[i];
}
})

没有错误但没有附加任何内容。检查控制台。

附加测试[2]

for(var i = 0; i <= global_array.length; i++) {
    d3.select("#main_svg").append(global_array[i]);
}
})

这会产生DOM异常错误。

Answer 1

我可以在第一行看到..

将global_array[0]更改为global_array

或

＆＃13;
＆＃13;
global_array[0] = '<svg data="BusinessProductFigure" x="553.671875" y="167" id= "something" xmlns="http://www.w3.org/2000/svg" version="1.1"><rect x="4" y="4" width="60" height="14" fill="rgb(299,299,162)" stroke-linejoin="round" stroke="rgb(299,299,162)" stroke-width="1"/></svg>';
＆＃13;
＆＃13;
＆＃13;

这将根据您的代码工作：）

Answer 2

如果将循环结束条件从i<=global_array.length更改为i<global_array.length，则第一种方法几乎可以正常工作。我说几乎因为它只适用于数组中的最后一个元素。设置innerHTML不会附加元素 - 它会替换所有内容。另一个要求是容器（“#main_svg”）不能是<svg>标记。你无法嵌套<svg> s

几乎工作示例：https://jsfiddle.net/LukaszWiktor/wd3w2rjL/

如何从数组添加<svg>元素

2 个答案: