如何添加到 <SVG> 數組中的元素

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 Exception錯誤。

Answer 1

我可以在第一行看到

將global_array[0]更改為global_array

要么

 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>'; 

這將根據您的代碼工作:)

Answer 2

如果將循環結束條件從i<=global_array.length為i<global_array.length則第一種方法幾乎可以i<global_array.length 。 我說這幾乎是因為它僅適用於數組中的最后一個元素。 設置innerHTML不會附加元素-它會替換所有內容。 另一個要求是容器（“ #main_svg”）不能是<svg>標記。 您不能嵌套<svg> s

幾乎可行的示例： https ： //jsfiddle.net/LukaszWiktor/wd3w2rjL/