SVG 이미지 애니메이션

Question

SVG 원을 애니메이션 할 수 있습니까? 나는 위의 코드가 작동 할 수있는 방법

<svg> 
    <image id="orange-circle" x="0" y="20" width="200" height="180" xlink:href="cat.png" /> 
    <animate 
     xlink:href="#orange-circle" 
     attributeName="cx" 
     from="50" 
     to="450" 
     dur="1s" 
     fill="freeze" 
     repeatCount="indefinite" /> 
</svg> 

:

<svg> 
    <circle id="orange-circle" r="30" cx="50" cy="50" fill="orange" /> 
    <animate 
     xlink:href="#orange-circle" 
     attributeName="cx" 
     from="50" 
     to="450" 
     dur="1s" 
     fill="freeze" 
     repeatCount="indefinite" /> 
</svg> 

마찬가지로, 나는 이미지를 애니메이션하려고? 이미지와

Answer 1

예제 코드 (쉬운) 아름다운 :

<svg> 
 
    <circle fill="blue" cx="150" cy="100" r="50"></circle> 
 
    <image xlink:href="http://i.imgur.com/ANS7Rkc.png" x="-50" y="72" width="100" height="50"> 
 
    <animate attributeName="x" from="-50" to="300" dur="5s" repeatCount="indefinite"></animate> 
 
    </image> 
 
</svg>

예 (이미지 없음) https://codepen.io/danjiro/post/how-to-make-svg-loop-animation

자습서 : https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial

enjoin us)