Star Rating with SVG catering for decimal point ra

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
• Display ratings with decimal place ie: 4.5, 3.2, 1.1 as well as whole stars
• Rated stars need to be yellow, stars remaining need to be grey

How and what do I change on the example to move the star rating left and right to get it do display the stars catering for decimals?

Fiddle example: http://jsfiddle.net/apbuc773/10/

Code:

<svg height="210" width="500" fill="url(#g)">
      <polygon points="165.000, 185.000, 188.511, 197.361, 184.021, 171.180,
 203.042, 152.639,
 176.756, 148.820,
 165.000, 125.000,
 153.244, 148.820,
 126.958, 152.639,
 145.979, 171.180,
 141.489, 197.361,
 165.000, 185.000" style="stroke: red;"/>
    <linearGradient y2="0.9733" x2="1" id="g" x1="0.0167" y1="0.9833">
<stop stop-color="#F00" offset="0.4733"/>
<stop stop-color="rgb(255, 255, 255)" offset="0.5033"/>
</linearGradient>
    </svg>

The code attached - is all this needed? As there will be 5 stars in total, can it be simplified.

Thanks

Answer 1

Change the offset fields from 0 (unfilled) to 1 (filled) to move the rating.

Not sure why you're specifying red in two different ways or why you've slightly different offset values.

Answer 2

You can adjust the <linearGradient> with some simple JS. Example below.

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


setFraction(0.4);

<svg height="210" width="500">
  <polygon points="165.000, 185.000, 188.511, 197.361, 184.021, 171.180,
 203.042, 152.639,
 176.756, 148.820,
 165.000, 125.000,
 153.244, 148.820,
 126.958, 152.639,
 145.979, 171.180,
 141.489, 197.361,
 165.000, 185.000" style="stroke:red; fill:url(#g)"/>
  <linearGradient id="g" x1="0" y1="0" x2="1" y2="0">
    <stop id="stop1" stop-color="#F00" offset="0.5"/>
    <stop id="stop2" stop-color="#fff" offset="0.5"/>
  </linearGradient>
</svg>

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.

Answer 3

Here is Fiddle with dots: http://jsfiddle.net/cnLHE/296/

You can place a rectangle underneath masked elements. In this Fiddle, the rectangle is width=90, which is 90% (at very bottom).

<rect x="0" y="0" width="90" height="20" style="fill:#2498c7; mask: url(#mask5)"/>

Change the 90 to 55, for example, and the underlying fill will shrink width.

Warning: I scrapped this method, because it did not work well with 20+ instances in page. For example, when loading a grid of rated products, the ratings graphic would sometimes disappear in Chrome. JS methods were more reliable.