循环中的SVG动画不透明度

Question

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

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

任何想法？

感谢

Answer 1

你有两个独立的动画 - 一个不透明度增加，一个是它降低。每一个都从另一端开始，但第一个也从0开始。下面是一个矩形的例子：

<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> 

Answer 2

可以使用values属性，像这样动画任何数量的值：

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

这将动画从不透明0到不透明度1（100％），然后在1秒的时间内再次回到0。