我有這個代碼來顯示十進制的星星。

.rating {
  width: 120px;
  height: 24px;
  position: relative;
  background-color: gray;
}

.rating progress.rating-bg {
  -webkit-appearance: none;
  -moz-appearence: none;
  appearance: none;
  border: none;
  display: inline-block;
  height: 24px;
  width: 100%;
  color: orange;
}

.rating progress.rating-bg::-webkit-progress-value {
  background-color: orange;
}

.rating progress.rating-bg::-moz-progress-bar {
  background-color: orange;
}

.rating svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<svg style="display:none;">
  <defs>
    <symbol id="fivestars">
      <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z M0 0 h24 v24 h-24 v-24" fill="white" fill-rule="evenodd"/>
      <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z M0 0 h24 v24 h-24 v-24" fill="white" fill-rule="evenodd" transform="translate(24)"/>
      <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z M0 0 h24 v24 h-24 v-24" fill="white" fill-rule="evenodd" transform="translate(48)"/>
      <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z M0 0 h24 v24 h-24 v-24" fill="white" fill-rule="evenodd" transform="translate(72)"/>
      <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z M0 0 h24 v24 h-24 v-24" fill="white" fill-rule="evenodd"  transform="translate(96)"/>
    </symbol>
  </defs>
</svg>
<div class="rating">
  <progress class="rating-bg" value="4.9" max="5"></progress>
  <svg><use xlink:href="#fivestars"/></svg>
</div>

# # #僅供參考，您可以將其全部封裝在一個本地JavaScript (JSWC) Web組件中:

<star-rating stars=5 rating="3.5"
             bgcolor="green" nocolor="grey" color="gold"></star-rating>

如果您使用自定義元素(所有現代瀏覽器都支持)創建所有的SVG客戶端，那就簡單多了:

僅從星形圖標復制d路徑 將https://yqnn.github.io/svg-path-editor/的d路徑編輯為100x100 視圖框/網格 通過將M0 0h100v100h-100v-100添加到路徑中，使其成為倒星形 在一個0 0 N 100的視圖框中創建了一個新的SVG文件來適應所有的星星..見下文 添加了一個背景矩形設置金色評級 使用反星形，每個都有一個x偏移量 增加了覆蓋所有半星形的矩形 將內聯事件onclick和onmouseover設置為每& quot半星& quot

<star-rating stars=5 rating="3.5"
             bgcolor="green" nocolor="grey" color="gold"></star-rating>
<star-rating stars=7 rating="50%"
             bgcolor="rebeccapurple" nocolor="beige" color="goldenrod"></star-rating>
<script>
  document.addEventListener("click", (evt) => console.log(evt.target.getAttribute("n")))

  customElements.define("star-rating", class extends HTMLElement {
    set rating( rate ) {
      if (!String(rate).includes("%")) rate = Number(rate) / this.stars * 100 + "%";
      this.querySelector("#rating").setAttribute("width", rate);
    }
    connectedCallback() {
      let { bgcolor, stars, nocolor, color, rating } = this.attributes;
      this.stars = ~~stars.value || 5;
      this.innerHTML = 
        `<svg viewBox="0 0 ${this.stars*100} 100" style="cursor:pointer;width:300px">`
      + `<rect width="100%" height="100" fill="${nocolor.value}"/>`
      + `<rect id="rating"  height="100" fill="${color.value}"  />`
        + Array(  this.stars     ).fill()
               .map((i, n) => `<path fill="${bgcolor.value}" d="M${ n*100 } 0h102v100h-102v-100m91 42a6 6 90 00-4-10l-22-1a1 1 90 01-1 0l-8-21a6 6 90 00-11 0l-8 21a1 1 90 01-1 1l-22 1a6 6 90 00-4 10l18 14a1 1 90 010 1l-6 22a6 6 90 008 6l19-13a1 1 90 011 0l19 13a6 6 90 006 0a6 6 90 002-6l-6-22a1 1 90 010-1z"/>`)
               .join("")
        + Array(  this.stars * 2 ).fill()
               .map((i, n) => `<rect x="${ n*50 }" n="${n}" opacity="0" width="50" height="100"`
                  + ` onclick="dispatchEvent(new Event('click'))" `
                  + ` onmouseover="this.closest('star-rating').rating = ${(n+1)/2}"/>`)
              .join("") 
      + "</svg>";

      this.rating = rating.value;
    }
  });
</script>

# # #使用& lt進度& gt元素。您可以使用SVG作為進度條的遮罩，而不是將進度條和SVG放在一起。在這里，我定義了一個星形遮罩，它只是一個星形的遮罩，并在另一個遮罩中屏蔽掉了五個矩形。然后可以將此遮罩應用于進度條。

我可以自由地構建星形，而不是使用路徑。當像這個例子一樣使用遮罩時，這并不重要。

document.forms.form01.range.addEventListener('change', e => {
  document.getElementById('rating').setAttribute('value', e.target.value);
});

.rating progress.rating-bg {
  -webkit-appearance: none;
  -moz-appearence: none;
  appearance: none;
  border: none;
  display: inline-block;
  height: 24px;
  width: 120px;
  color: orange;
  background-color: #ddd;
  mask: url(#m1);
}

.rating progress.rating-bg::-webkit-progress-value {
  background-color: orange;
}

.rating progress.rating-bg::-moz-progress-bar {
  background-color: orange;
}

<svg style="display: block;" width="0" height="0" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <mask id="star">
      <rect width="24" height="24" fill="white"/>
      <g transform="translate(12 12)">
        <rect id="r1" width="48" height="24" fill="black" transform="translate(0 7) rotate(24) skewX(-42)"/>
        <use href="#r1" transform="rotate(72)"/>
        <use href="#r1" transform="rotate(144)"/>
        <use href="#r1" transform="rotate(216)"/>
        <use href="#r1" transform="rotate(288)"/>
      </g>
    </mask>
    <mask id="m1">
      <rect id="r2" width="24" height="24" fill="white" mask="url(#star)"/>
      <use href="#r2" transform="translate(24 0)"/>
      <use href="#r2" transform="translate(48 0)"/>
      <use href="#r2" transform="translate(72 0)"/>
      <use href="#r2" transform="translate(96 0)"/>
    </mask>
  </defs>
</svg>
<div class="rating">
  <progress id="rating" class="rating-bg" value="2" max="5"></progress>
</div>
<form name="form01">
  <input type="range" name="range" step=".25" min="0" max="5" value="2">
</form>