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

SVG 사본은 n 사본을 첨부하는 것이 특히 효율적인 방법은 아닙니다. 그것은 효과가 있지만, 내가 추천하는 것은 아닙니다.

더 나은 방법은 JS에서 rect 요소를 만들고 <svg> 요소에 추가하여 그래프를 직접 작성하는 것입니다.

또는 이와 비슷한 종류의 SVG 그래프 라이브러리 (예 : d3js)가 있습니다.