用SVG填充半个星星

本文介绍了用SVG填充半个星星的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

对于我正在建设的评分系统。

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?

请参阅jsbin：

在这个例子当前填充是一个黄色。如果我添加类是半，我想它显示一半灰色，并有黄色。

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.

这是否可以在SVG中执行？

Is this possible in SVG?

推荐答案

填充星。 2个站点可确保即时转换。

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.

这篇关于用SVG填充半个星星的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

JSBin