如何用SVG实现支持1位小数、多实例的动态百分比五星评分

我们可以抛弃全局mask的实现思路，利用SVG元素天然的overflow:hidden特性，仅在需要部分填充的星星内部嵌套一个控制显示宽度的子SVG元素，就能直接自定义任意填充比例，完全不需要JS，也不会出现多实例冲突问题。

方案优势 #

• 无需提前定义任意数量的mask，没有全局ID冲突风险
• 所有填充比例直接内联设置，和你期望的自定义属性用法逻辑完全一致
• 多实例完全独立，修改一个评分的展示不会影响其他评分
• 支持0-100%任意精度的填充，完美适配1位小数的评分需求

实现代码 #

公共基础代码（页面仅需引入一次） #

<svg width="0" height="0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
  <defs>
    <symbol id="star" viewBox="0 0 64 64">
      <path d="M32 2l-10 22l-20 2l15 14l-5 22l20-12l20 12l-5-22l15-14l-20-2Z"
        stroke-width="3" stroke="#FFC800" />
    </symbol>
  </defs>
</svg>

2.5分评分示例 #

<!-- 第1颗全亮星 -->
<svg width="32" height="32" viewBox="0 0 64 64">
  <use href="#star" fill="#FFC800"></use>
  <use href="#star" fill="none"></use>
</svg>
<!-- 第2颗全亮星 -->
<svg width="32" height="32" viewBox="0 0 64 64">
  <use href="#star" fill="#FFC800"></use>
  <use href="#star" fill="none"></use>
</svg>
<!-- 第3颗50%填充星：修改内部svg的width属性即可控制填充比例 -->
<svg width="32" height="32" viewBox="0 0 64 64">
  <svg width="50%" overflow="hidden">
    <use href="#star" fill="#FFC800"></use>
  </svg>
  <use href="#star" fill="none"></use>
</svg>
<!-- 第4颗未亮星 -->
<svg width="32" height="32" viewBox="0 0 64 64">
  <use href="#star" fill="none"></use>
</svg>
<!-- 第5颗未亮星 -->
<svg width="32" height="32" viewBox="0 0 64 64">
  <use href="#star" fill="none"></use>
</svg>

4.2分评分示例（和其他实例完全互不干扰） #

<!-- 前4颗全亮星 -->
<svg width="32" height="32" viewBox="0 0 64 64">
  <use href="#star" fill="#FFC800"></use>
  <use href="#star" fill="none"></use>
</svg>
<svg width="32" height="32" viewBox="0 0 64 64">
  <use href="#star" fill="#FFC800"></use>
  <use href="#star" fill="none"></use>
</svg>
<svg width="32" height="32" viewBox="0 0 64 64">
  <use href="#star" fill="#FFC800"></use>
  <use href="#star" fill="none"></use>
</svg>
<svg width="32" height="32" viewBox="0 0 64 64">
  <use href="#star" fill="#FFC800"></use>
  <use href="#star" fill="none"></use>
</svg>
<!-- 第5颗20%填充星，对应0.2分 -->
<svg width="32" height="32" viewBox="0 0 64 64">
  <svg width="20%" overflow="hidden">
    <use href="#star" fill="#FFC800"></use>
  </svg>
  <use href="#star" fill="none"></use>
</svg>

可选：CSS变量控制写法 #

如果需要更灵活的样式控制，也可以用CSS变量传递填充比例：

<svg width="32" height="32" viewBox="0 0 64 64" style="--fill-percent: 70%">
  <svg width="var(--fill-percent)" overflow="hidden">
    <use href="#star" fill="#FFC800"></use>
  </svg>
  <use href="#star" fill="none"></use>
</svg>

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