Opacidad de animación SVG en el bucle

Question

Me gustaría hacer que la opacidad de una ruta svg vaya de 0 a 100 a 0 y a 100 en un bucle continuo.

Hasta ahora puedo conseguirlo para animar de 0 a 100, pero no viceversa,

¿Alguna idea?

Gracias

Answer 1

Usted tiene dos animaciones separados - uno para aumentar la opacidad y la otra para que decreciente. Cada uno comienza cuando el otro finaliza, pero el primero también comienza en 0s. He aquí un ejemplo de un 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> 

Answer 2

Puede animar cualquier número de valores con el atributo values, así:

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

Eso animará de la opacidad de 0 a opacidad 1 (100%), y luego de nuevo a 0, en el transcurso de 1 segundo.