svg stars

Change class name on click in jQuery

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>

<div>  
  <svg class="starRatings" viewBox="0 0 180 32">
    <use xlink:href="#icon-star" x="0" y="0" class="star"/>
    <use xlink:href="#icon-star" x="36" y="0" class="star" />      
    <use xlink:href="#icon-star" x="72" y="0" class="star"/> 
    <use xlink:href="#icon-star" x="108" y="0" class="star--half" />       
    <use xlink:href="#icon-star" x="144" y="0" class="star--full" />  
  </svg>  
</div>

CSS

.starRatings {
  fill: none;
	stroke: #48440E;
	stroke-width: 1;
  height: 20px;
}

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

.star--full {
  fill: #48440E;
}

.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");
    }
  });
});