[SVG] animateTransform 2가지 동시 적용

 

Object의 모양 및 위치를 동시에 조정해야 할 경우 활용할 수 있습니다.

 

 

모양 및 위치 변경 후 그 상태 그대로 유지하도록 구현한 코드입니다.

<svg viewBox="0 0 300 200">
    <g>
        <ellipse cx="110" cy="100" rx="100" ry="80">
            <animateTransform attributeName="transform"
            type="scale"
            from="1 1"
            to="0.5 0.5"
            begin="1s"
            dur="5s"
            repeatCount="1"
            fill="freeze"
            restart="always"/>
        </ellipse>
        <animateTransform attributeName="transform"
        type="translate"
        from="0 0"
        to="150 50"
        begin="1s"
        dur="5s"
        repeatCount="1"
        fill="freeze"
        restart="always"/>
    </g>
</svg>

 

결과는 다음과 같습니다.

 

 

 

왼쪽에서 오른쪽으로 이동하면서 크기는 줄어드는 타원입니다.