从字符串列表创建动态SVG

Question

我正在尝试使用JQuery创建一个SVG元素。SVG的内容是从字符串列表中生成的，这就是我的问题所在。

我正在填充一个名为'arr‘的变量，方法是循环遍历我的数据库中的数百个条目，并根据该数据创建一个svg，然后将该数据附加到'arr’。如何将这个字符串元素列表附加到我的主SVG元素中，以便正确地显示它？

这里的要点是：

• Arr由一个字符串列表填充，每个字符串表示要进入svg
• 中的一个形状，最终Arr将是数百个字符串

。

​

var mapSvg = $.parseHTML('<svg id="tile-map-svg" width="100%" height="300"></svg>');
arr = [
	'<rect height="50" width="50" fill="blue"/>',
  '<rect height="20" width="20" fill="green"/>'
]
mapSvg[0].append(arr);
$('#tile-map').append(mapSvg);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

<div style="background:lightblue; padding:10px;">
  <div id="tile-map">
  </div>
  <svg id='tile-map-svg' width="100" height="100">
      <rect height="25" width="25" fill="red" class="tile"/>
  </svg>
</div>

​

我也试过了但也没用..。

var mapSvg = $.parseHTML('<svg id="tile-map-svg" width="100%" height="600"></svg>');
arr = [
    '<rect height="50" width="50" fill="blue"/>',
  '<rect height="20" width="20" fill="green"/>'
]
for (var i = 0; i < arr.length; i++) {
    var el = $.parseHTML(arr[i])[0];
  mapSvg[0].append(el);
}
$('#tile-map').append(mapSvg);

Answer 1

在解析html之前，先遍历arr中的所有元素如何：

let html = '<svg id="tile-map-svg" width="100%" height="300">';
arr.forEach(shape => {
html += shape;
});
html += "</svg>";
const mapSvg = $.parseHTML(html);
$("#tile-map").append(mapSvg);

Answer 2

或者只需复制没有jQ的HTML，例如：

​

var mapSvg = document.getElementById("tile-map");
var arr = [
'<rect height="50" width="50" fill="blue"/>',
'<rect height="20" width="20" fill="green"/>'
]
var s = "<svg id='tile-map-svg' width=100 height=100>"+
arr.join('\n')+
"</svg>";
mapSvg.innerHTML = s;
mapSvg.innerHTML += s;
mapSvg.parentElement.innerHTML += mapSvg.outerHTML.replace(/</g,'&lt;').replace(/>/g,'&gt;');

<div style="background:lightblue; padding:10px;">
  <div id="tile-map">
  </div>
</div>

​