[책] 자바스크립트 코드 레시피 278 - 181일차

SVG 요소를 동적으로 추가하기

• 자바스크립트로 외부의 데이터를 참조하여 그래픽 작업을 하고 싶을 때

설명

document.createElement()가 아닌 document.createElementNS()를 사용해 SVG요소를 자바스크립트로 생성할 수 있습니다. 비슷한 메소드의 이름이지만, SVG 요소는 끝에 NS(이름공간, NameSpace)가 붙어 있습니다. HTML과 SVG는 엄밀히 이름공간이 다르므로 http://www.w3o.org/2000/svg 를 지정하지 않으면 HTML에서 SVG 액세스가 불가능합니다.

실습

index.html

<svg id="mySvg" vidwBox="0 0 200 200" width="200" height="200"></svg>

---

script.js

const myCircle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
myCircle.setAttribute('cx', '100');
myCircle.setAttribute('cy', '100');
myCircle.setAttribute('r', '100');
myCircle.setAttribute('fill', '#ffff9d');
const mySvg = document.querySelector('#mySvg');
mySvg.appendChild(myCircle);