Animazione di un gradiente SVG

Question

Mi piacerebbe generare un gradiente SVG che varia nel tempo.

In questo codice di esempio, mi piacerebbe per generare un'ellisse il cui gradiente è di colore rosso con una striscia gialla che viaggia da ovest a est nel corso del tempo (creando un effetto shimmer):

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

Questo doesn' lavoro ancora, ma non sono sicuro che sia perché sto sbagliando, o non è un effetto che posso ottenere con i gradienti SVG.

Answer 1

Hai solo bisogno di un periodo di tempo per l'animazione. Aggiungi dur="5s" ad esempio come attributo dell'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

Ecco un example che funziona su Firefox e Chrome:

i valori degli attributi che è previsto nelle specifiche here viene utilizzato in questo esempio.

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