<div class="stars__data">
                <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="red-rect" mask="url(#mask)" fill="red" width="50%" height="100%"/>
                  <rect id="blue-rect" mask="url(#mask)" fill="blue" x="50%" width="50%" height="100%"/>
                    
                </svg>
              </div>

body {
  padding: 0;
}

.stars{
    display: flex;
  align-items: center;
  margin-bottom: 24px;
  width: 320px;
}

.stars__count{
    font-size: 14px;
    line-height: 1.7;
    padding-left: 20px;
}

.stars__inner{
    position: relative;
}
  
  
.stars__progress{
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: -1;
}

.stars__data{
    cursor: pointer;
    display: block;
}
  
  .stars__data,
.stars__progress{
    width: 130px;
    height: 28px;
}
  
svg{
      width: 130px;
    height: 28px;
}
  

//stars
  function move(e, obj) {
      var summ = 0;
      var id = obj.next().attr('id').substr(1);
      var progress = e.pageX - obj.offset().left;

      var width = obj.width(),
      leftEdge = obj.offset().left,
      rightEdge = obj.offset().left + width;

      if (e.pageX < leftEdge) {
     progress = 0;
      } else if (e.pageX >= rightEdge) {
     progress = obj.width();
      }
  
      var rating = progress * 5 / width;

      $('#param' + id).text(rating.toFixed(2));
      obj.next().width(progress);
      $('.stars__count').each(function() {
        summ += parseFloat($(this).text());
      });
    };

    $('.stars__data').on('mouseleave', function(e) {
      var summ = 0;
      var id = $(this).next().attr('id').substr(1);

      var width = $(this).width(),
            reasonableWidth = width * 0.1,
            height = $(this).height(),
            leftEdge = $(this).offset().left,
            topEdge = $(this).offset().top,
            bottomEdge = topEdge + height,
            exitPointX = e.pageX,
            exitPointY = e.pageY;

      if ( ( exitPointY >= topEdge ) && ( exitPointY <= bottomEdge ) && ( exitPointX > (leftEdge + reasonableWidth) ) ) {
        $('#param' + id).text("5");
        $(this).next().width(width);
        $('.stars__count').each(function() {
          summ += parseFloat($(this).text());
        });
      }
    });

  $('.stars__data').click(function(e) {
    $(this).toggleClass('fixed');
    move(e, $(this));
  });

  $('.stars__data').on('mousemove', function(e) {
    if ($(this).hasClass('fixed') == false) {
      move(e, $(this));
    }
  });

 $("#rating").on('mousemove', function(e) {
  let width = 181;
  let redPercentage = e.clientX/width * 100;
  let bluePercentage = 100 - redPercentage;
  
  $("#red-rect").attr('width', redPercentage+'%');
  
  $("#blue-rect").attr('x', redPercentage+'%');
  $("#blue-rect").attr('width', bluePercentage+'%');
});