ループ上のSVGアニメーション不透明度

Question

svgパスの不透明度を0から100まで0に戻し、連続ループで100にしたいと考えています。

これまでのところ、私は、それがなく、再び0から100までアニメーション化するために

任意のアイデアを得ることができますか？増加不透明度と、それは減少させるための1のための1 -

おかげ

Answer 1

は、次の2つの別々のアニメーションを持っています。それぞれは、もう一方が終わると始まりますが、最初のものも0から始まります。あなたはこのように、values属性を使用して任意の数の値をアニメーション化することができます

<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

：ここでRECTのための例です

<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に戻ります。