Animation 循环上的SVG动画不透明度

Animation 循环上的SVG动画不透明度,animation,svg,opacity,Animation,Svg,Opacity,我想让svg路径的不透明度在连续循环中从0变为100,再变回0和100 到目前为止,我可以让它从0变为100,但不能再变回来 有什么想法吗 谢谢你有两个独立的动画-一个用于增加不透明度,另一个用于减少不透明度。每一个在另一个结束时开始,但第一个也在0开始。下面是一个rect的示例: <rect x="10" y="10" width="20" height="20"> <animate id="animation1" attributeName

我想让svg路径的不透明度在连续循环中从0变为100,再变回0和100

到目前为止,我可以让它从0变为100,但不能再变回来

有什么想法吗


谢谢你有两个独立的动画-一个用于增加不透明度,另一个用于减少不透明度。每一个在另一个结束时开始,但第一个也在0开始。下面是一个rect的示例:

<rect x="10" y="10" width="20" height="20">
    <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>

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

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


这将在1秒的时间内从“不透明度0”设置为“不透明度1”(100%),然后再次设置为“0”。

我们可以看到您目前的代码吗?(如果你愿意的话,可以将其编辑到你的帖子中)。这似乎不会重复。。可能需要
repeatCount=“unfinite”
不推荐的元素:(@DougChamberlain deprecated elements?对我来说很好。