Animando un gradiente SVG

Question

Me gustaría generar un gradiente SVG que varíe con el tiempo.

En este código de ejemplo, me gustaría para generar una elipse cuyo gradiente es de color rojo con una raya amarilla que recorre de oeste a este a través del tiempo (creando un efecto de brillo):

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
    <defs> 
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> 
     <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1" /> 
     <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" > 
     <animate 
      attributeName="offset" 
      from="0%" 
      to="100%" 
      repeatCount="indefinite"/> 
     </stop> 
     <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" /> 
    </linearGradient> 
    </defs> 
    <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" /> 
</svg> 

Esto no tiene' Todavía trabajo, pero no estoy seguro de si es porque lo estoy haciendo mal, o no es un efecto que puedo lograr con los gradientes de SVG.

Answer 1

Solo necesita un período de tiempo para la animación. Agregue dur="5s" por ejemplo como un atributo del elemento animate.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
 
    <defs> 
 
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> 
 
     <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1" /> 
 
     <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" > 
 
     <animate 
 
      attributeName="offset" 
 
      from="0%" 
 
      to="100%" 
 
      dur="5s" 
 
      repeatCount="indefinite"/> 
 
     </stop> 
 
     <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" /> 
 
    </linearGradient> 
 
    </defs> 
 
    <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" /> 
 
</svg>

Answer 2

He aquí un example que funciona en Firefox y Chrome:

los valores de atributo que se proporciona en la especificación here se utiliza en este ejemplo.

<linearGradient id="myG"> 
<stop offset="0" stop-color="#f15361"> 
</stop> 
<stop offset=".25" stop-color="#fbaf4a"> 
<animate attributeName="offset" dur="5s" values="0;1;0" 
    repeatCount="indefinite" /> 
</stop> 
<stop offset="1" stop-color="#f15361"/>