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

SVG 요소 스타일 변경하기

• 유저 조작에 반응하는 그래픽을 넣고 싶을 때

구문

setAttribute() 요소의 속성 설정

설명

SVG 요소는 document.querySelector() 등을 사용한 참조와 setAttribute()의 속성값 변경을 통해 스타일을 변경할 수 있다. SVG는 HTML의 DOM과 같은 방식으로 사용할 수 있습니다.

실습

index.html

<svg vidwBox="0 0 200 200" width="200" height="200">
  <circle id="myCircle" cx="100" cy="100" stroke-width="2" stroke="#ffffff"></circle>
</svg>

---

script.js

const circle = document.querySelector('#myCircle');
circle.setAttribute('r', '100'); // 반지름 지정
circle.setAttribute('fill', '#ffff8b'); // 색상 지점
circle.setAttribute('fill-opacity', '0.5'); // 색상 투명도 지정