Fill a percentage of an SVG and animate the fill

Question

Currently, I am working on a project that is comparing state data with data from another country. One data point is percentage of protected land and I want to fill the a per

Answer 1

Here are my two cents:

You can have a linear gradient like this:

Then take the first stop element:

var firstStop = document.getElementById('F1gst1');

And then assign the percentage you want fill, with the attribute offset:

percentage = '35%'; firstStop.setAttribute('offset',percentage);

And that is the way in javascript. You need a gradient for every state (you can use a group) and maybe you will need to define a path object with a fill inside every state with the same form, so you can apply the linear gradient to that path fill attribute.

If you need an animation, you can set a setInterval, and add an '1%' every x miliseconds to make the effect, and stop every interval when the desired percentage is reached.

I hope this at least have given you a clue.

Regards.