Me gustaría generar un gradiente SVG que varíe con el tiempo.Animando un gradiente SVG
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.
así lo he intentado pero todavía no funciona? http://jsfiddle.net/kg6Pg/ –
Tu enlace funciona para mí en Firefox. –
Pero no funciona para mí en Chrome – Denis