循環中的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。