[javascript] DOM을 사용하여 기존 SVG에 SVG 요소 추가

Program / 글쓴이

다음 코드와 유사한 HTML 구성이 있습니다.

<div id='intro'>
<svg>
//draw some svg elements
<svg>
</div>

자바 스크립트와 DOM을 사용하여 위에서 정의한 SVG에 몇 가지 요소를 추가하고 싶습니다. 어떻게해야합니까? 나는 생각하고 있었다

var svg1=document.getElementById('intro').getElementsByTagName('svg');
svg1[0].appendChild(element);//element like <line>, <circle>

DOM 사용에 익숙하지 않거나 appendChild에 전달할 요소를 만드는 방법에 대해 잘 모르기 때문에이 문제를 해결하거나이 문제를 해결하기 위해 필요한 다른 대안을 보여주세요. 감사합니다.

답변

HTML 요소를 생성하려면 document.createElement함수를 사용하십시오 . SVG는 네임 스페이스를 사용하므로 document.createElementNS함수 를 사용해야 합니다.

var svg = document.getElementsByTagName('svg')[0]; //Get svg element
var newElement = document.createElementNS("http://www.w3.org/2000/svg", 'path'); //Create a path in SVG's namespace
newElement.setAttribute("d","M 0 0 L 10 10"); //Set path's data
newElement.style.stroke = "#000"; //Set stroke colour
newElement.style.strokeWidth = "5px"; //Set stroke width
svg.appendChild(newElement);

이 코드는 다음과 같이 생성됩니다.

<svg>
 <path d="M 0 0 L 10 10" style="stroke: #000; stroke-width: 5px;" />
</svg>

createElement:
https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement

createElementNS:
https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS

답변

JS를 사용하여 svg를 많이 다루는 경우 d3.js를 사용하는 것이 좋습니다. 페이지에 포함시키고 다음과 같이하십시오.

d3.select("#svg1").append("circle");

답변