使用百分比值填充自定义SVG图像

Question

我想使用打字稿或CSS使用Angular 6中的百分比值填充自定义SVG图像。

有没有可用的工具？

自定义图片可以是$，齿轮图标，拇指等。

任何帮助，将不胜感激。

Answer 1

最简单的方法可能是使用线性梯度。

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>