5 star rating with svg

5 star rating with svg

HTML

<div>
  <select class="js-rating">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
  </select>
</div>

<div class="rating">  
  <div class="rating_stars" >
    <svg height="25" width="23" class="star" data-rating="5">
      <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78"/>
    </svg>
    <svg height="25" width="23" class="star" data-rating="5">
      <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78"/>
    </svg>
    <svg height="25" width="23" class="star" data-rating="5">
      <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78"/>
    </svg>
    <svg height="25" width="23" class="star" data-rating="5">
      <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78"/>
    </svg>
    <svg height="25" width="23" class="star" data-rating="5">
      <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78"/>
    </svg>
  </div>
   <div class="rating_stars_cover"></div>
</div>

CSS

.rating {
  position: relative;
  width: 112px;
  color: blue;
  font-size: 25px;
  height: 25px;
  padding: 0;
  margin-right: .5rem;
}

.rating_stars {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  padding: 0;
  overflow: hidden;
}

.rating_stars svg {
  fill: #ff0000;
}

.rating_stars_cover {
  position: absolute;
  right: 0;
  z-index: 1;
  padding: 0;
  height: 25px;
  background: white;
}