search

adobe-webplatform / Snap.svg

The JavaScript library for modern SVG graphics.
http://snapsvg.io
Apache License 2.0
13.95k stars 1.15k forks source link

Animating gradients "color-stop" value #575

Open gonzalle opened 6 years ago

gonzalle commented 6 years ago

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 commented 6 years ago

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

ibrierley commented 6 years ago

Never use the word impossible in programming :).

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

gonzalle commented 6 years ago

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.