Line형 SVG에 애니메이션 넣기

SVG에 CSS없이 애니메이션을 넣는 방법입니다.

구조는 아래와 같습니다.

 

<svg class="check" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="30px" height="30px" viewBox="0 0 30 30">

<!-- svg의 기본 설정 위치와 크기, 뷰박스 설정 -->
<path fill="none" stroke="#fff" stroke-width="10" d="M13 41.531 42.286 71 88 25"
        stroke-dasharray="100" stroke-dashoffset="100">

<!-- 아래의 animate속성을 이용해 애니메이션을 구현합니다 -->

<animate attributeName="stroke-dashoffset" from="100" to="0" dur="0.8s" fill="freeze" repeatCount="indefinite"/>

  </path>
</svg>

 

 

See the Pen PureSvg Animation Check by Yongkyu, Lee (@Yongkyu) on CodePen.

 

 

* 애니메이션 옵션 설명

 

반복(repeatCount)

repeatCount="indefinite"

옵션값: 1~NN 또는 무한재생(indefinite)

 

반복후 애니메이션의 끝에서 멈춤(freeze)

fill="freeze"

옵션값: freeze / remove

재생시간(duration)

dur="1s"<br>옵션값: 0.1s~NN