SVG Based Star Rating Plugin For jQuery - star-rating-svg.js

A lightweight jQuery plugin for rendering a SVG based star rating system on your webpage that supports for arbitrary star fractions, variable star sizes and colors.

How to use it:

1. Import the star-rating-svg.css stylesheet for the basic CSS styles.

<link rel="stylesheet" thref="path/to/star-rating-svg.css">

2. Add the required CSS class 'jq-stars' to an empty DIV element.

<div class="demo jq-stars"></div>

3. Import jQuery library and the jQuery star-rating-svg.js script at the bottom of your web page.

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="/path/to/jquery.star-rating-svg.js"></script>

4. Call the function to render a basic star rating inside the container you just created.

$(".demo").starRating();

5. Available options to customize your star rating system.

$(".demo").starRating({

  // the number of stars
  totalStars: 5,

  // min rating
  minRating: 0

  // rate using whole stars
  useFullStars: false,

  // 'straight' or 'rounded'
  starShape: 'straight',

  // the color of empty star
  emptyColor: 'lightgray',

  // star color on hover
  hoverColor: 'orange',

  // star color on active
  activeColor: 'gold',

  // star color on rated
  ratedColor: 'crimson',

  // use gradient color
  useGradient: true,

  // readonly mode
  readonly: false,

  // auto disable after rate
  disableAfterRate: true,
  
  // when enabled (true), enables compatibility with the base tag in your head section
  baseUrl: false,

  // gradient color
  starGradient: {
    start: '#FEF7CD',
    end: '#FF9511'
  },

  // the thickness of the border
  strokeWidth: 0,

  // the color for the border
  strokeColor: 'black',

  // Initial rating
  initialRating: 0,

  // star size
  starSize: 40,

  // if true, forces rounding the initial rating to the nearest upper half even if the value is closer to the lower (1.1 -> 1.5 rather than 1.1 -> 1.0)
  forceRoundUp: true

  // callback
  callback: function(currentRating){
    // do something after rating
  }

  // more callbacks
  onHover: noop,
  onLeave: noop
  
});

6. API methods.

// Destroys the instance and removes events attached to it
$('.demo').starRating('unload');

// Gets the current rating from instance
$('.demo').starRating('getRating');

// 0 to max stars (int), round (Boolean)
$('.demo').starRating('setRating', VALUE, ROUND);

// Resize the stars on the fly
// value: 1 to 200
$('.demo').starRating('resize',VALUE);

// disable/enable stars manually
$('.demo').starRating('setReadOnly', true);

7. Events.

$('.demo').starRating({
  onHover: function(currentIndex, currentRating, $el){
    // do something on mouseover
  },
  onLeave: function(currentIndex, currentRating, $el){
    // do something after mouseout
  }
});

Changelog:

2020-08-18

• fix level colors

2018-10-08

• adds minimum rating

2017-12-18

• adds forceRoundUp

2017-11-28

• JS update

2017-01-05

• Adding fix for baseUrl having a hash

2016-08-22

• adds public method to setReadOnly dynamically

2016-08-07

• Fixed issues with SVG and <base> tag

2016-07-20

• Adds method to resize stars on the fly

2016-06-20

• Fixed: When activating full stars it is not possible to return to zero stars.

2016-05-18

• Fixed: Need option to round up or down, when using "setRating"

2016-05-17

• prevent setting out of bounds rating

2016-05-16

• Fixed unload method

2016-04-10

• Update jquery.star-rating-svg.js

2016-04-03

• adds support for full stars
• Disables rating after initial rate selected

2015-12-12

• v3.5.0

2015-08-31

• indentation fix

---

This awesome jQuery plugin is developed by nashio. For more Advanced Usages, please check the demo page or visit the official website.