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

This can be done by plain css and html: http://jsfiddle.net/haohcraft/rAPN5/1/

Basically, the trick is

1. You need a image which has a transparent inner field but non-transparent outer field, like the image in the fiddle. And you need to set z-index:1 in order to place it above the filled
   .
2. Set the filled
   and the img to be position: absolute; width:90px; height:90px; in that case.
3. Then you can adjust the height of the filled div to show the percentage