如何为 SVG 图像中的云图标设置动画答案

【问题标题】：How to animate cloud icon in a SVG image如何为 SVG 图像中的云图标设置动画
【发布时间】：2015-07-15 03:27:12
【问题描述】：

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

这是我的JSFIDDLE

我用来制作动画的代码：

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

【问题讨论】：

到底发生了什么？我在 OS X 上的 Chrome 中看到了您所描述的内容。
云没有从它的位置开始移动。现在它从图像的角落开始。

标签： css svg css-animations svg-animate

【解决方案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，然后使用 sn-p 编辑器将其发布到此处。这样你就更有可能获得帮助。

【讨论】：