Fill custom SVG image using percentage value

Question

I want to fill the custom SVG image with percentage value in Angular 6 using typescript or using CSS.

Is there any tool available for that?

Custom image can be anything like $, gear icon, thumb etc.

Any help would be appreciated.

Answer 1

The simplest method is probably with a linear gradient.

function setProgress(amt)
{
  amt = (amt < 0) ? 0 : (amt > 1) ? 1 : amt;
  document.getElementById("stop1").setAttribute("offset", amt);
  document.getElementById("stop2").setAttribute("offset", amt);
}


setProgress(0.25);

<svg width="400" height="400">
  <defs>
    <linearGradient id="progress" x1="0" y1="1" x2="0" y2="0">
      <stop id="stop1" offset="0" stop-color="blue"/>
      <stop id="stop2" offset="0" stop-color="lightblue"/>
    </linearGradient>
  </defs>

  <circle id="my-shape" cx="200" cy="200" r="200" fill="url(#progress)"/>
</svg>