css – 只用SVG填充半个星

前端之家收集整理的这篇文章主要介绍了css – 只用SVG填充半个星前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
对于我正在建立的评级系统.有没有办法在这个svg示例中添加一个css类,以便它只显示填充的一半星?

见jsbin:http://jsbin.com/cifip/2/

在此示例中,当前填充是黄色.如果我添加该类是一半,我希望它显示半灰色和黄色.

这在SVG中是否可行?

解决方法

创建一个linearGradient来填充星星. 2站确保即时过渡.
<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>

然后将星星的填充设置为此.

猜你在找的CSS相关文章