Snap.svg
Snap.svg copied to clipboard
Animating gradients "color-stop" value
I can access, without problem, to the color-stop of any (gradientdef.stops())[0].attr("stop-color","red")
it will change to red the color of the first stop of the gradient previously defined in gradientdef
I can also animate the value "offset" of the gradient's stop
(gradientdef.stops())[0].animate({"offset":"50%"}, 300, mina.linear)
BUT when it comes to animate the "stop-color" attributes :
(gradientdef.stops())[0].animate({"stop-color":"red"}, 300, mina.linear)
it always ends-up with an error like this
Error: <rect> attribute width: Expected length, "rgb(0, 0, 0)".
Please note that the gradient is not applied to any rect element... The
To make it short : it is impossible to animate a color of a gradient.
Never use the word impossible in programming :).
https://jsfiddle.net/yqeLghm6/10/
That is exactly that... THANK YOU SO MUCH... But you'll admit that it is a workaround and that snap should do it by itself... Whatever... I love you.