Snap.svg icon indicating copy to clipboard operation
Snap.svg copied to clipboard

Animating gradients "color-stop" value

Open gonzalle opened this issue 7 years ago • 3 comments

I can access, without problem, to the color-stop of any defined in a gradient def. (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 reported in the error has nothing to do here... Any idea anyone ???? And BTW... Is snap.svg still active ??? ...

gonzalle avatar Dec 13 '17 00:12 gonzalle

To make it short : it is impossible to animate a color of a gradient.

gonzalle avatar Dec 13 '17 14:12 gonzalle

Never use the word impossible in programming :).

https://jsfiddle.net/yqeLghm6/10/

ibrierley avatar Dec 13 '17 15:12 ibrierley

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.

gonzalle avatar Dec 13 '17 15:12 gonzalle