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

SVG 요소 마우스로 다루기

• SVG 요소의 스타일을 변경하고 싶을 때

실습

마우스에 반응하는 SVG 요소의 생성은 DOM에 대한 이벤트 설정을 통해 가능합니다.

index.html

<svg vidwBox="0 0 200 200" width="200" height="200">
  <circle id="myCircle" cx="100" cy="100" r="95" fill="#bbdefb"></circle>
</svg>

script.js

const circle = document.querySelector('#myCircle');
circle.addEventListener('click', (event) => {
  console.log(event.target, '클릭하였습니다.');
});