javascript - 如何乘以 SVG 的实例？

Question

我的目标是创建一个非常简单的条形图，为此我使用了 SVG。由于条形图可以包含多个矩形，例如，我可以乘以一个矩形的实例吗？

我有这个示例代码:

<rect id="myRect" height="50" width="100" fill="blue" y="500" x="0"/>

此代码调用的是外部 SVG:

xhr = new XMLHttpRequest();
xhr.open("GET","svg/rect.svg",false);
xhr.send("");
document.getElementById("svgContainer")
  .appendChild(xhr.responseXML.documentElement);

这可能吗？或者我的方法是否正确？

Answer 1

附加 n 个 SVG 副本并不是执行此操作的特别有效的方法。它会起作用，但这不是我推荐的。

更好的方法是通过创建 rect 自己构建图表。 JS 中的元素并将它们附加到 <svg>元素。

或者，有许多 SVG 图形库(例如 d3js)旨在简化此类操作。