Svg fill animation for the given path

Question

I am trying to animate an arrow from left to right.The code of my arrow\'s path is given below:

Answer 1

You can do this by just animating the s in a .

How this works is that we have a linear gradient representing an abrupt change from green to white. The elements move the position, of that abrupt change, from the left of the arrow (offset=0) to the right (offset="1").

Note that SVG elements will not work in IE. If you need to support IE, you will need to use the FakeSmile library or use a different method (such as a JS animation library).