score:2

Accepted answer

You can use an SVG gradient as fill to achieve this. The trick is to define the gradient such that it corresponds to the partitions you want (i.e. set the stops at 20% intervals). To make "hard" stops (i.e. make it seem like it's not a gradient), put 2 stops immediately after each other around the 20% marks, with the first the colour of the previous segment and the following the colours of the next segment. I've used this technique here.

This should work fine for a fixed-length path. If you want to animate the path from start to end, this technique is not particularly suitable. With a gradient defined like this, you'll end up with the partition regardless of the total length of the line. If you need to gradually draw the line with the different colours appearing one after another, you would need to modify the gradient (i.e. the stops) dynamically.


Related Query