JSFiddle - React, Tailwind, and code Playground

by rdenver6

HTML

<svg class="star-source" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <g id="icon-star">
      <path d="M20.388,10.918L32,12.118l-8.735,7.749L25.914,31.4l-9.893-6.088L6.127,31.4l2.695-11.533L0,12.118
               l11.547-1.2L16.026,0.6L20.388,10.918z" />
    </g>

    <linearGradient id="halfGradient">
      <stop stop-opacity="1" offset="50%" stop-color="#48440E"></stop>
      <stop stop-opacity="0" offset="50%"></stop>
    </linearGradient>    
  </defs>
</svg>

<p>  
  <svg class="star" viewBox="0 0 180 32">
    <desc>
      <p>Uživateli hodnoceno třemi a půl hvězdičkami z pěti.</p>
    </desc>
    <use xlink:href="#icon-star" x="0" y="0" />
    <use xlink:href="#icon-star" x="36" y="0"  />      
    <use xlink:href="#icon-star" x="72" y="0" /> 
    <use xlink:href="#icon-star" x="108" y="0" class="star--half" />       
    <use xlink:href="#icon-star" x="144" y="0" class="star--empty" />  
  </svg>  
</p>

SCSS

.star {
  fill: #48440E;
	stroke: #48440E;
	stroke-width: 1;
}

/* Half-filled star using gradient 
   --------------------------------
   (CSS gradient does not work here)
*/

.star--half {
  fill:url(#halfGradient);
}

.star--empty {
  fill: none;
}

/* Not so important styles: */

.star {
  height: 20px;
}

.star-source {
  position: absolute;
  width: 0;
  top: 0;
}

/* IE11 */

svg { display: inline-block; vertical-align: top; }

JavaScript

$(document).ready(function() {
  var ratingElem = $('.rating input[name="star"]');

  ratingElem.change(function() {
    if (this.checked) {
      $(this).parent().addClass("active");
    }
  });
});