[SVG] 파이차트 애니메이션

pie 차트 애니메이션

stroke-dasharray와 stroke-dashoffset을 활용하여 파이 차트 애니메이션을 제작했다.

stroke-dasharray 속성은 dash와 gap의 길이를 지정할 수 있으며, stroke-dashoffset은 dash의 오프셋 위치를 조정할 수 있다.
애니메이션 키프레임에서 stroke-dashoffset 속성을 사용해 대시의 오프셋 위치를 조정해줌으로써 차트의 움직임을 표현했다.

퍼센트 값을 남은 부분의 퍼센트 값으로 바꾸고, 각도로 치환하고, 부채꼴의 호의 길이를 구하여 stroke-dashoffset 값으로 넣어준다.

파이의 너비는 stroke의 두께와 원의 반지름을 조정해주면 되고, 퍼센트 값은 data-per 속성에 값을 지정해주면 사용이 가능하다.

​