html - Star Rating with SVG catering for decimal point rating -
i have code create star rating. have not used svg before , can't figure out how following:
- rating out of 5
- display ratings decimal place ie: 4.5, 3.2, 1.1 whole stars
- rated stars need yellow, stars remaining need grey
how , change on example move star rating left , right display stars catering 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 - needed? there 5 stars in total, can simplified.
thanks
here fiddle dots: http://jsfiddle.net/cnlhe/296/
you can place rectangle underneath masked elements. in fiddle, rectangle width=90, 90% (at bottom).
<rect x="0" y="0" width="90" height="20" style="fill:#2498c7; mask: url(#mask5)"/>
change 90 55, example, , underlying fill shrink width.
warning: scrapped method, because did not work 20+ instances in page. example, when loading grid of rated products, ratings graphic disappear in chrome. js methods more reliable.
Comments
Post a Comment