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

Question

我想使用 typescript 或 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>