基于百分比值从左上角沿线条填充SVG图表图标

需求：给SVG图表图标根据百分比值进行颜色填充，填充从左上角开始，沿图标线条向右推进。

实现效果 #

当设置进度为60%时，图标左侧区域为深色（#bb8e89），右侧为浅色（#f4b6b0），分界位置随百分比动态调整。

HTML代码 #

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 254.25 233.26">
<defs>
 <linearGradient id="progress" x1="1" y1="0" x2="0" y2="0">
      <stop id="stop1" offset="0" stop-color="#bb8e89"/>
      <stop id="stop2" offset="0" stop-color="#f4b6b0"/>
    </linearGradient>
</defs>
<g id="Capa_2" data-name="Capa 2">
<g id="Capa_1-2" data-name="Capa 1">
<path class="cls-1" fill="url(#progress)" d="M254.25,17.72,235.32,0,216.38,17.72H227V92.93c0,66.6-25.41,124.48-104.17,124.48S18.63,159.53,18.63,92.93V52.35H0V92.14c0,76.11,32.18,141.12,122.79,141.12,89.77,0,122-65,122-141.12V17.72Z"/>
</g>
</g>
</svg>

JavaScript代码 #

function setProgress(amt)
{
  amt = (amt < 0) ? 0 : (amt > 1) ? 1 : amt;
  document.getElementById("stop1").setAttribute("offset", amt);
  document.getElementById("stop2").setAttribute("offset", amt);
}

// 设置60%进度
setProgress(0.60);

实现原理 #

1. 使用线性渐变（linearGradient）作为SVG路径的填充色，渐变方向设置为从右到左（x1="1" y1="0" x2="0" y2="0"），对应视觉上从左上角向右的填充逻辑。
2. 两个渐变停止点（stop）的offset属性控制颜色分界：
   • stop1是深色的结束位置，stop2是浅色的开始位置
   • 通过动态修改两个停止点的offset值，让深色区域的范围随百分比变化，达到进度填充的效果
3. setProgress函数会先将输入的百分比值限制在0-1范围内，避免无效值导致的显示异常。

内容的提问来源于stack exchange，提问作者Jose Alvarez