如何在SVG图像中为云图标设置动画

Question

我是svg动画的新手 我试图为svg图像中的云设置动画。但它没有按预期工作我希望所有的云应该从它们的位置开始移动到图像的末尾并且不断重复但是它没有发生。

这是我的JSFIDDLE

我以前编码的代码：

<animateTransform attributeName="transform" from="1100" to="0" type="translate" begin="5s" dur="18s" repeatCount="indefinite" />

Answer 1

您的代码似乎工作正常。

但是，如果您希望立即启动动画，则应指定负begin属性。此外，from和to坐标都在viewBox范围内，因此不是从图片的左侧滑落而是从右侧滑回（这是我假设的）你想要的，当它们接近左侧时，云突然传送到整个画面。

编辑：我刚发现另一个问题 - 您应该为translate属性提供两个值。你只提供了一个，这就是为什么所有的云都坐在同一条水平线上。

如下更改属性应解决这些问题（假设您希望Y坐标为123）：

<animateTransform
    attributeName="transform"
    from="1700 123"
    to="-500"
    type="translate"
    begin="-5s"
    dur="18s"
    repeatCount="indefinite"
/>

Here's an updated jsfiddle link

  

P.S：下次遇到这样的问题时，首先制作一个minimal, complete and verifiable example，然后使用代码段编辑器将其发布到此处。你会更有可能以这种方式获得帮助。