SVG의 애니메이션 수단과 그 선택 방법

SVG 애니메이션 수단

HTML에 짜넣은 SVG를 애니메이션 시키는 방법은 이하의 3개.

CSS

JavaScript

HTML - SVG element

결론에서 말하면 CSS 또는 JavaScript 중 하나를 사용해야합니다.
CSS로 애니메이션할 수 있는 범위라면 CSS, 그 이상하고 싶다면 JS. 브라우저 대응은 고려하지 않는다.

CSS

CSS에서 SVG의 각 속성 값을 변경합니다. 드러나는 속성은 한정되어 있지만 간단하게 구현하기 쉽다.

제어 범위는 SVG의 프레젠테이션 속성이라고 불리는 속성으로 제한된다. (프레젠테이션 속성 목록: htps //w w. w3. rg/TR/SVG/p 로피 dx. HTML)
정직 일람을 봐도 핀과 오지 않기 때문에 이하에 예를 나타낸다.

할 수 있는 일의 예

SVG 선 및 채우기 RGBA 변경

선의 폭이나 스타일 (파선이나 점선 등)을 바꾼다

모양이 필적을 따라 서서히 나타납니다 ( htps : // cs-ticks. 이 m / svg - ぃ )

할 수없는 것의 예

SVG를 구성하는 패스의 제어점의 좌표를 제어

아래 그림과 같이 점을 당겨 모양을 바꾸는 것

자바스크립트

SVG를 구성하는 DOM 요소를 JS로 재작성하므로 하고 싶은 마음껏 할 수 있다.
도서관도 많이 있다.

Snap.svg

Svg.js

Greensock

상용은 라이센스료가 걸리므로 주의.

모핑 같은 핀 포인트인 표현을 위한 라이브러리라고도 한다.

SVG-Morpheus

react-svg-morph

Greensock (morphingPlugin)

HTML - SVG element (비추천)

SVG 요소 중 하나 인 animate 태그를 사용합니다.
SMIL(Synchronized Multimedia Integration Language)라고 한다.
향후 브라우저가 지원할지 어떨지를 결정하고 있지 않으므로 비추천.

참조 : htps : //에서 ゔぇぺぺr. 어쩌면. 오 rg / 그럼 / cs / ue b / SVG / 에멘 t / 애니메
샘플 코드 : ht tp // 코데펜. 이오 / ch리 s 코 y 아니 r / 펜 / Dp 흠

비고: SVG 또는 Canvas

큰 애니메이션이라면 SVG, 부품이 많으면 Canvas.

SVG는 묘화 요소의 표시 면적이 커도 좌표 데이터로부터 화상을 생성할 수 있기 때문에 가볍다.
Canvas는 DOM 트리를 형성하지 않기 때문에 애니메이션의 구성 요소가 증가해도 가볍다.

참고 기사

SVG MANIAX - CSS Nite After dark7

SVG 기초

SVG 애니메이션의 현재 상태

SVG 애니메이션