如何为 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 属性提供两个值。你只提供了一个，这就是为什么所有的云都坐在同一条水平线上。

按如下方式更改属性应该可以解决这些问题（假设您需要 123 的 Y 坐标）：

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

Here's an updated jsfiddle link

P.S: Next time you have a problem like this, start by making a minimal, complete and verifiable example, and post it here using the snippet editor. You'll be much more likely to get help that way.

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

How to animate cloud icon in a SVG image

css

svg

css-animations

svg-animate