SVGでスターレーティングを実装する

はじめに

webサイトやアプリの口コミやレビュー等で見かける星のスターレーティングですが、
svgとhtmlとcssで実装できます。
javaScriptを使用すれば入力、選択された値を取得し、スターレーティングに設定することも可能です。

htmlでsvgを定義する

幅と高さが0のSVGを作成します。
今回は部分的に色の付いた星を実装したいので、maskを使用し、一部だけ星の中の色をつけてid="mask"をセットします。
下記のコードのrect x="50%"の場合は半分だけ色を塗った星ができます。
再利用するためにsymbolにid="sample"をセットします。

<svg style="width: 0; height: 0;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
    <defs>
      <mask id="mask">
        <rect x="0" y="0" width="32" height="32" fill="white" />
        <rect x="50%" y="0" width="32" height="32" />
      </mask>
      <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" id="sample">
        <path d="M31.547 12a.848.848 0 00-.677-.577l-9.427-1.376-4.224-8.532a.847.847 0 00-1.516 0l-4.218 8.534-9.427 1.355a.847.847 0 00-.467 1.467l6.823 6.664-1.612 9.375a.847.847 0 001.23.893l8.428-4.434 8.432 4.432a.847.847 0 001.229-.894l-1.615-9.373 6.822-6.665a.845.845 0 00.214-.869z" />
      </symbol>
    </defs>
  </svg>

定義したsvgを再利用する

星は５個必要なので、上記で定義したsvgを５個使用します。
下記の<use>要素を使えば再利用が可能です。上記で指定したid="sample"を記述し紐付けます。
fillに塗りつぶしたい色とstrokeに線の色を指定します。
５個目の星はmaskで塗りの色のグラデーションをかけたいので、mask=url("#mask")を指定します。

<svg class="star" viewBox="0 0 32 32">
    <use xlink:href="#sample"></use>
    <use xlink:href="#sample" fill="blue" stroke="blue"></use>
  </svg>
  <svg class="star" viewBox="0 0 32 32">
    <use xlink:href="#sample"></use>
    <use xlink:href="#sample" fill="#blue" stroke="blue"></use>
  </svg>
  <svg class="star" viewBox="0 0 32 32">
    <use xlink:href="#sample"></use>
    <use xlink:href="#sample" fill="#blue" stroke="blue"></use>
  </svg>
  <svg class="star" viewBox="0 0 32 32">
    <use xlink:href="#sample"></use>
    <use xlink:href="#sample" fill="blue" stroke="blue"></use>
  </svg>
  <svg class="star" viewBox="0 0 32 32">
    <use xlink:href="#sample" mask=url("#mask")></use>
    <use xlink:href="#sample" fill="none" stroke="blue"></use>
  </svg>

CSSでスタイリング

星を横並びにして、余白をあけるのと星のサイズを指定します。

.star-rating {
  display: flex;
  justify-content: center;
  gap: 5px;
}

.star {
  width: 36px;
  height: 35px;
  fill: blue;
}

下記のイメージのスターレーティングが実装できました。