[JavaScript] 자바스크립트에서 SVG 요소 애니메이션 효과 주기

201_자바스크립트에서 SVG 요소 애니메이션 효과 주기 [적용] 시간 변화에 따라 SVG 요소에 변화를 주고 싶을 때 [내용] SVG는 DOM의 형식 구조를 따르므로 일정 시간마다 자바스크립트로 DOM을 조작하면 애니메이션 효과를 줄 수 있다. 예를 들어, 원의 색상을 서서히 빨간색으로 변하게 하는 효과는 SVG 요소의 속성값을 가져와 조금씩 변경하면 된다. 이때는 requestAnimationFrame()을 사용한다. HTML index.html JavaScript main.js const myCircle = document.querySelector('#myCircle'); let time = 0; animate(); function animate() { // 시간 변화 time += 0.1; // ..

2022.07.26