动画SVG图像

我可以动画SVG圆圈吗？动画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>

同样，我试图动画图像：

<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>

我怎样才能让上面的代码工作？

来源

2016-08-19 Mohammad Fareed

什么似乎是实际问题？动画是不是开始了？究竟是什么与他们呢？有没有可能发挥作用的周边代码？ – dakab

看一个FAQ animate：https://css-tricks.com/transforms-on-svg-elements/ – KingRider

实施例的代码（容易）与图像是美观：

<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

加我们;）

来源

2016-08-19 13:16:44 KingRider

谢谢，乐于助人。 –

动画SVG图像

回答

相关问题