Star Rating with SVG catering for decimal point rating - angularjs

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

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.

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

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.