<div id="stars">
                <svg id="rating" width="130pt" height="28pt" viewBox="0 0 130 28" xmlns="http://www.w3.org/2000/svg">
                  <!-- СОЗДАЕМ МАСКУ-->
                  <mask id="mask">
                    <rect fill="white" width="100%" height="100%"/>
                    <path fill="black" d="M0 0h130v28H0V0m11.95 3.62c-.45 2.45-1.38 4.78-2.56 6.97-2.72-.12-5.44-.12-8.16-.05l.32 2c1.86 1.37 3.7 2.75 5.42 4.29-.35 3.06-1.83 5.9-1.61 9.03 2.71-1.21 5.21-2.82 7.66-4.48 2.43 1.72 4.67 4.05 7.75 4.49-.31-3.04-1.55-5.91-1.61-8.99 2.17-1.71 5.9-2.74 5.58-6.12-2.68-.16-5.35-.18-8.03-.21-.84-2.42-1.65-4.86-2.46-7.29l-2.3.36m26.34-.32c-.96 2.43-1.79 4.91-2.94 7.26-2.68-.08-5.37-.07-8.05-.06.06.53.17 1.61.23 2.14 1.8 1.37 3.63 2.68 5.37 4.12-.38 3.07-1.62 5.97-1.57 9.09 2.69-1.24 5.19-2.85 7.68-4.45 2.32 1.81 4.6 3.95 7.59 4.52-.46-3.02-1.36-5.97-1.37-9.05 2.08-1.69 5.88-2.86 5.41-6.16-2.67-.1-5.33-.12-8-.16-.84-2.34-1.59-4.72-2.34-7.09l-2.01-.16m25.96.01c-.95 2.42-1.83 4.88-2.92 7.24-2.68-.07-5.36-.07-8.04-.04.05.54.13 1.61.17 2.15 1.81 1.4 3.66 2.73 5.45 4.16-.52 3.03-1.81 5.93-1.55 9.07 2.64-1.35 5.12-2.97 7.65-4.5 2.32 1.8 4.56 4.1 7.64 4.42-.55-2.99-1.51-5.9-1.53-8.96 1.91-1.26 3.76-2.6 5.53-4.05-.04-.51-.13-1.54-.17-2.05-2.62-.15-5.24-.17-7.86-.18-.89-2.34-1.71-4.71-2.4-7.12-.5-.03-1.48-.11-1.97-.14m26.03-.26c-1.09 2.46-1.91 5.02-2.97 7.49-2.69-.05-5.37-.05-8.06-.03.05.54.16 1.61.21 2.15 1.74 1.44 3.58 2.76 5.37 4.14-.45 3.04-1.75 5.94-1.52 9.06 2.66-1.3 5.12-2.97 7.68-4.47 2.28 1.85 4.52 4.21 7.63 4.46-.44-2.81-1.34-5.51-2.32-8.17 2.11-2.29 6.38-3.25 6.37-6.9-2.7-.2-5.4-.2-8.1-.19-1.46-2.47-.9-6.83-4.29-7.54m25.61.42c-.74 2.4-1.64 4.75-2.61 7.07-2.96-.05-5.94-.14-8.89.17 1.41 2.73 4.02 4.45 6.46 6.16-.74 2.97-1.81 5.9-1.5 9.02 2.58-1.44 5.05-3.07 7.64-4.48 2.06 1.78 4.27 3.42 6.71 4.65.21-2.91-.26-5.78-1.43-8.45 2.03-2.31 6.46-3.25 6.37-6.84-2.71-.16-5.42-.19-8.13-.19-.99-2.32-1.81-4.7-2.39-7.16-.75.01-1.49.03-2.23.05z"/>
                  </mask>
                  
                  <!-- ПРЯМОУГОЛЬНИК ПРОПУЩЕННЫЙ ЧЕРЕЗ МАСКУ -->
                  <rect id="go-rect" mask="url(#mask)" fill="#fa6c20" width="100%" height="100%"/>
                  <rect id="start-rect" mask="url(#mask)" fill="#d3d3d3" x="100%" width="100%" height="100%"/>
                    
                </svg>
  <div class="stars__count" id="param1">5.0</div>
</div>

#stars{
  display: flex;
  align-items: center;
}
#stars > svg {
  width: 130px; 
  height: 28px;
  float: left;
  cursor: pointer;
  margin-top: -0.3rem;
}
#stars > div {
  font-size: 1.2rem;
  line-height: 1.7;
  padding-left: 20px;
  position: relative;
  z-index: 2;
}

const Rater = function(element){
  let disabled = false,
    // DOM объекты
    svg = $(element).find('svg'),
    filled = $(element).find('#go-rect'),
    shaded = $(element).find('#start-rect'),
    count = $(element).find('.stars__count'),
    // По умолчанию 5 звезд
    progress = 1,
    //Дополнительный функционал для удобства
    resolver,
    rejector;
  const calc = p => p < 0.11 ? 0 : Math.ceil(p * 5) / 5,
    rating = () => progress * 5,
    render = () => {
      filled.attr('width',progress * 100 + '%')
      shaded.attr("x", progress * 100 + '%')
      count.text(rating().toFixed(1))
    };
  svg.on('mousemove', function(e){
    // если пользователь уже оценил
    if (disabled) return;
    progress = calc((e.clientX - filled.offset().left) / svg.width());
    render();
  })
  svg.on('mouseleave', function(){
    if (!disabled) 
      setTimeout(() => { 
        if (!disabled) render(progress = 1)
      }, 500)
  })
  svg.on('click', function(){
    disabled = true
    resolver(rating())
  })
  this.waitUserRating = function(){
    return new Promise((resolve, reject) => {
      if (disabled) resolve(rating())
      else {
        resolver = resolve;
        rejector = reject;
      }
    })
  }
}

new Rater( $('#stars') )
  .waitUserRating()
  .then( rating => alert(`Ваша оценка: ${rating}`) )