[JavaScript] 자바스크립트에서 SVG 요소 마우스로 다루기
2022. 7. 26. 01:00ㆍProgram/JavaScript
200_자바스크립트에서 SVG 요소 마우스로 다루기
[적용]
- SVG 요소의 스타일을 변경하고 싶을 때
[내용]
마우스에 반응하는 SVG 요소의 생성은 DOM에 대한 이벤트 설정을 통해 가능하다.
예를 들어 클릭 이벤트의 확인은 document.querySelector()로 SVG 요소를 참조하고,
addEventListener()로 클릭 이벤트를 감시한다.
HTML index.html
<body>
<svg viewBox="0 0 200 200" width="200" height="200">
<circle id="myCircle" cx="100" cy="100" r="95" stroke="#BBDEFB" />
</svg>
</body>JavaScript main.js
const circle = document.querySelector('#myCircle');
circle.addEventListener('click', (event) => {
alert('클릭 이벤트가 발행하였습니다.');
});
실행결과
원을 클릭하면 알림창이 표시된다.
참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김
'Program > JavaScript' 카테고리의 다른 글
| [JavaScript] 자바스크립트에서 SVG 그래픽 다운로드하기 (0) | 2022.07.26 |
|---|---|
| [JavaScript] 자바스크립트에서 SVG 요소 애니메이션 효과 주기 (0) | 2022.07.26 |
| [JavaScript] 자바스크립트에서 SVG 요소 스타일 변경하기 (0) | 2022.07.26 |
| [JavaScript] 자바스크립트에서 SVG 요소를 동적으로 추가하기 (0) | 2022.07.26 |
| [JavaScript] 자바스크립트에서 SVG 사용하기 (0) | 2022.07.25 |