2

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.

See this image

pfx
  • 20,323
  • 43
  • 37
  • 57
Pathik Vejani
  • 4,263
  • 8
  • 57
  • 98
  • Maybe something [like this](https://stackoverflow.com/questions/32645053/is-it-possible-to-make-svg-circle-fill-color-from-bottom-to-top-based-on-percent/32659265)? – alariva Aug 07 '18 at 04:55
  • @alariva yes but it is with circle which is default, I want any icon like I have mentioned. – Pathik Vejani Aug 07 '18 at 04:57
  • @alariva see the image i have added in question.. – Pathik Vejani Aug 07 '18 at 04: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. https://codepen.io/anon/pen/mjGLZy – alariva Aug 07 '18 at 05: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 Aug 07 '18 at 06:03
  • Duplicate the path to fill and clip that with an rectangular clipping path. This way you get two colors overlaid. With some Script you can generate the clipping path to display a percentage value. – philipp Aug 07 '18 at 06:23

1 Answers1

12

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>
Paul LeBeau
  • 97,474
  • 9
  • 154
  • 181