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

I don't think this is possible with the fill attribute. But instead, you can invert your SVG path to a rectangle with a triangle like hole. Now you just need a second element behind that path, where you can simply animate the scale in x-direction, to fill the hole from left to right.

Here is an image showing the technique:

An here is a working example:

Note: The answer was updated from triangle to arrow, I won't update my answer as the technique is the same for every shape.