使用百分比值填充自定义 SVG 图像 [英] Fill custom SVG image using percentage value

问题描述

我想在 Angular 6 中使用 typescript 或 CSS 用百分比值填充自定义 SVG 图像.

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

有什么可用的工具吗?

自定义图片可以是 $、齿轮图标、拇指等.

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

任何帮助将不胜感激.

推荐答案

最简单的方法可能是使用线性渐变.

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>

这篇关于使用百分比值填充自定义 SVG 图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！