如何使用CSS实现SVG图标部分填充，适配星级评分等业务场景

可以实现，这是星级评分组件非常成熟的实现方案，基于你提供的feather图标库，可通过CSS渐变+CSS变量的方案实现任意比例的部分填充，具体实现如下：

• 用CSS线性渐变作为SVG的填充属性值，通过控制渐变的分割位置实现任意比例的部分填充
• 搭配CSS变量传递填充比例，无需重复编写多套样式，支持动态赋值

CSS代码 #

svg.star {
  /* 星型边框颜色 */
  stroke: #f59e0b;
  width: 32px;
  height: 32px;
  /* 定义填充比例变量，默认值0% */
  --fill-percent: 0%;
  /* 渐变分割：小于比例值的部分显示填充色，大于部分透明 */
  fill: linear-gradient(90deg, #f59e0b var(--fill-percent), transparent var(--fill-percent));
}

HTML代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <title>星级评分示例</title>
  <script src="https://unpkg.com/feather-icons"></script>
  <style>
    svg.star {
      stroke: #f59e0b;
      width: 32px;
      height: 32px;
      --fill-percent: 0%;
      fill: linear-gradient(90deg, #f59e0b var(--fill-percent), transparent var(--fill-percent));
    }
  </style>
</head>
<body>
  <!-- 3.2星效果示例：3个全满+1个20%填充+1个全空 -->
  <i data-feather="star" class="star" style="--fill-percent: 100%"></i>
  <i data-feather="star" class="star" style="--fill-percent: 100%"></i>
  <i data-feather="star" class="star" style="--fill-percent: 100%"></i>
  <i data-feather="star" class="star" style="--fill-percent: 20%"></i>
  <i data-feather="star" class="star" style="--fill-percent: 0%"></i>

  <script>
    feather.replace()
  </script>
</body>
</html>

如果需要根据接口返回的评分数值自动生成效果，可通过以下JS代码批量计算每个星的填充比例：

// 示例评分值，取值范围0~5，可替换为接口返回的实际数值
const rating = 3.2;
const starList = document.querySelectorAll('.star');

starList.forEach((star, index) => {
  // 计算当前星需要填充的比例
  const currentFill = rating - index;
  if (currentFill >= 1) {
    star.style.setProperty('--fill-percent', '100%');
  } else if (currentFill > 0) {
    star.style.setProperty('--fill-percent', `${currentFill * 100}%`);
  } else {
    star.style.setProperty('--fill-percent', '0%');
  }
})

• 无需修改SVG原始结构，兼容所有通用SVG图标库
• 填充精度最高可到1%，完全满足半星、小数星等星级评分的常见需求
• 填充逻辑纯CSS实现，性能开销极低

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