Menu
For a rating system I'm building. Would there be any way to add a css class to this svg example such that it would show only half the star filled in?
See jsbin: http://jsbin.com/cifip/2/
In this example the current fill is a yellow color. If i add the class is-half I'd like it to show half grey and have yellow.
Is this possible in SVG?
931
Your best solution is probably going to be to use two <canvas> tags and write the fill portion over the container portion. That way you can calculate both separately and don't have to worry about a partial SVG file. Doing it this way, you'll have much greater control over everything.
Just set . star width to 24 and . star. half:after margin-left to -24px, width to 12px, and the half-stars will render correctly.
create a linearGradient to fill the star. The 2 stops ensure an instant transition.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="256px" height="256px" viewBox="0 0 32 32">
<defs>
<linearGradient id="grad">
<stop offset="50%" stop-color="yellow"/>
<stop offset="50%" stop-color="grey"/>
</linearGradient>
</defs>
<path fill="url(#grad)" d="M20.388,10.918L32,12.118l-8.735,7.749L25.914,31.4l-9.893-6.088L6.127,31.4l2.695-11.533L0,12.118
l11.547-1.2L16.026,0.6L20.388,10.918z"/>
</svg>then set the fill of the star to this.
148
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
