循环上的 SVG 动画不透明度

Posted 2023-03-06

【中文标题】循环上的 SVG 动画不透明度

【英文标题】：SVG animation opacity on loop

【发布时间】：2012-08-03 10:02:01

【问题描述】：

我想让 svg 路径的不透明度在连续循环中从 0 到 100 回到 0 和 100。

到目前为止，我可以让它从 0 变为 100 的动画，但不能再返回，

有什么想法吗？

谢谢

【问题讨论】：

我们能看到你目前的代码吗？ （如果愿意，可以将其编辑到您的帖子中）。

【参考方案1】：

您可以使用values 属性为任意数量的值设置动画，如下所示：

<rect x="10" y="10"  >
    <animate attributeName="opacity"
             values="0;1;0" dur="1s"
             repeatCount="indefinite"/>
</rect>

这将在 1 秒内从不透明度 0 变为不透明度 1 (100%)，然后再次回到 0。

【讨论】：

这似乎没有重复..可能需要repeatCount="indefinite"

【参考方案2】：

您有两个独立的动画 - 一个用于增加不透明度，一个用于降低不透明度。每个都在另一个结束时开始，但第一个也从 0 开始。这是一个矩形的例子：

<rect x="10" y="10"  >
    <animate id="animation1"
             attributeName="opacity"
             from="0" to="1" dur="1s"
             begin="0s;animation2.end" />
    <animate id="animation2"
             attributeName="opacity"
             from="1" to="0" dur="1s" 
             begin="animation1.end" />
</rect>

【讨论】：

不推荐使用的元素 :(

@DougChamberlain 弃用了元素？对我来说工作得很好。