Star Rating with SVG catering for decimal point rating

Question

I have some code to create a star rating. I have not used SVG before and I can\'t figure out how to get it to do the following:

• Rating is out of 5
• Di

Answer 1

You can adjust the with some simple JS. Example below.

function setFraction(fraction)
{
    document.getElementById("stop1").setAttribute("offset", fraction);
    document.getElementById("stop2").setAttribute("offset", fraction);
}


setFraction(0.4);

If you wanted to avoid JS, then you could create 11 different versions of the star (unfilled, 0.1, 0.2 ... 0.9, filled) and just include the correct one.