css - Fill only Half a star with SVG

Question

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?

Answer 1

create a linearGradient to fill the star. The 2 stops ensure an instant transition.

<svg>
    <linearGradient id="grad" x1="0" x2="0" y1="0" y2="100%">
        <stop offset="50%" stop-color="grey"/>
        <stop offset="50%" stop-color="white"/>
    </linearGradient>
</svg>

then set the fill of the star to this.