[JavaScript] 자바스크립트에서 SVG 요소를 동적으로 추가하기
2022. 7. 26. 00:42ㆍProgram/JavaScript
198_자바스크립트에서 SVG 요소를 동적으로 추가하기
[적용]
- 자바스크립트로 외부의 데이터를 참조하여 그래픽 작업을 하고 싶을 때
[문법]
| 메소드 | 의미 | 반환 |
| document.createElementNS ('http://www.w3.org/2000/svg', SVG요소명) |
SVG 요소 생성 | SVG 요소 |
[내용]
HTML index.html
<body>
<svg viewBox="0 0 200 200" width="200" height="200" id="mySvg"></svg>
</body>document.createElement() 가 아닌 document.createElementNS()를 사용해 SVG 요소를 자바스크립트로 생성할 수 있다.
비슷한 메소드의 이름이지만, SVG 요소는 끝에 NS(이름공간, Name Space)가 붙어 있다.
HTML과 SVG는 엄밀히 이름공간이 다르므로 'http://www.w3.org/200/svg'를 지정하지 않으면
HTML에서 SVG 액세스가 불가능하다.
JavaScript main.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', '#FFFFBD');
const mySvg = document.querySelector('#mySvg');
mySvg.appendChild(myCircle);
실행결과
참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김
'Program > JavaScript' 카테고리의 다른 글
| [JavaScript] 자바스크립트에서 SVG 요소 마우스로 다루기 (0) | 2022.07.26 |
|---|---|
| [JavaScript] 자바스크립트에서 SVG 요소 스타일 변경하기 (0) | 2022.07.26 |
| [JavaScript] 자바스크립트에서 SVG 사용하기 (0) | 2022.07.25 |
| [JavaScript] 자바스크립트에서 카메라 기능 사용하기 (0) | 2022.07.25 |
| [JavaScript] 자바스크립트에서 스크립트로 영상 제어하기 (0) | 2022.07.25 |