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.

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.

• javascript
• css
• typescript
• svg
• angular6

• Maybe something like this? – alariva Commented Aug 7, 2018 at 4:55
• @alariva yes but it is with circle which is default, I want any icon like I have mentioned. – Pathik Vejani Commented Aug 7, 2018 at 4:57
• @alariva see the image i have added in question.. – Pathik Vejani Commented Aug 7, 2018 at 4:59
• I see. I've been tinkering around but have to admit it's not my ground. However after some research I found a codepen I forked to create an extra example. Unfortunately, I don't see a simple way to use any percent just straight away, you need to define classes, but maybe it's a good starting point. Shape is a star in this case. codepen.io/anon/pen/mjGLZy – alariva Commented Aug 7, 2018 at 5:46
• For using continuous percentage fill, maybe you can manipulate the linearGradient stop offset with JS, so you dont need to create discrete number of CSS classes for cutting offsets. – alariva Commented Aug 7, 2018 at 6:03

1 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>