SVG 애니메이션 직선, 회전 이동

AnimateMotion

begin = "button.click"

<rect  style="cusor:pointer;"/>

<text > Click </text>

AnimateTranform

예제

 <circle

         cx="60.854164"

         cy="122.37499"

         r="13.349334" >

         <animateTransform

            attributeName="transform"

            begin="0s"

            dur="20s"

            type="rotate"

            from="0 60.854164 122.37499" /* 회전 중심은 원의 중심으로 했다. */

            to="360 60.854164 122.37499"

            repeatCount="indefinite"

        />

        </circle>

mpath

참고 : 

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animate

https://css-tricks.com/guide-svg-animations-smil/

http://blog.bilue.com.au/svg-animations-seriously-very-good/

https://codepen.io/netsi1964/pen/WxyYbj

https://css-tricks.com/almanac/properties/t/transform/

1축 이동

seesaw

spring

X, Y 방향으로 이동

X, Y 방향으로 이동: 자바스크립트 방식

회전

회전: 자바스크립트 방식