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 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.