环路SVG动画不透明度 [英] SVG animation opacity on loop

问题描述

我想作一个SVG路径的不透明度去从0到100回到0和100上连续循环。

I would like to make an svg path's opacity to go from 0 to 100 back to 0 and to 100 on a continuous loop.

到目前为止，我可以得到它的动画从0到100，但是不回来，

So far i can get it to animate from 0 to 100 but not back again,

任何想法？

感谢

推荐答案

您有两个单独的动画 - 一个用于不透明增加，一个是它减少。每个开始的另一端时，但第一个也开始于0。下面是一个矩形的例子：

You have two separate animations - one for opacity increasing and one for it decreasing. Each begins when the other ends, but the first one also begins at 0s. Here's an example for a 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>

这篇关于环路SVG动画不透明度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！