只用 SVG 填充半颗星 [英] Fill only Half a star with SVG

问题描述

对于我正在构建的评级系统.有什么办法可以在这个 svg 示例中添加一个 css 类，以便它只显示填充的星号的一半?

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:http://jsbin.com/cifip/2/

在此示例中，当前填充为黄色.如果我添加类 is-half，我希望它显示半灰色并显示黄色.

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?

推荐答案

创建一个 linearGradient 来填充星星.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 填充半颗星的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！