用SVG填充半颗星

Question

用SVG填充半颗星

Tim*_*Tim 8 css svg

对于我正在建设的评级系统.有没有办法在这个svg示例中添加一个css类,以便它只显示填充的一半星？

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

在此示例中,当前填充为黄色.如果我把这个类添加到一半,我希望它显示半灰色并且有黄色.

这在SVG中是否可行？

Answer 1

Rob*_*son 10

创建一个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>

Run Code Online (Sandbox Code Playgroud)

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

很好的解决方案。对于那些不太熟悉 SVG 的人，我会给出一个如何设置填充的示例，例如 `<path fill="url(#grad)" ...` (2认同)

Answer 2

Alv*_* K. 8

根据您的目标受众,<use>某些较旧的浏览器不受支持.另一种方法是用功能绘制<path>外部<defs>.stop-opacity是可选的(为将来的读者添加): -

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
    width="200" height="200">
    <defs>
        <linearGradient id="half_grad">
            <stop offset="50%" stop-color="yellow"/>
            <stop offset="50%" stop-color="grey" stop-opacity="1" />
        </linearGradient>
    </defs>
    <path 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.118l11.547-1.2L16.026,0.6L20.388,10.918z"
        fill="url(#half_grad)" stroke-width="1" stroke="red"/>
</svg>

Run Code Online (Sandbox Code Playgroud)

某些浏览器（例如 Chrome 60.0.3112.90）会保留原始 ID 并缓存 svg，因此当引用相同的 id 时，它会重复内存中的第一个 svg。当使用星星作为 svgs 时，通常使用超过 1 个星星来显示类似网络评级的内容 - 如果您复制并粘贴此代码片段（例如多个星星 svgs），请为“ LinearGradient id”分配一个唯一的 id 并每个 svg 的“路径填充” (2认同)

Answer 3

squ*_*age 6

为什么不使用网络字体？

我知道您询问过如何修改SVG图像,但您是否考虑过使用Web字体？

创建包含完整,半满和空星形标志的字体非常容易.这些可以映射到你喜欢的任何代码点 - 在下面的例子中我使用了这三个字符?,?和?.或者你可以使用"★","½"和"  ".<rant>也许有一天Unicode实际上会包含一个半满的星形符号,但还没有.(但如果你需要一堆便便 ......)</ rant>

使用Web字体,您可以获得与SVG相同的结果,但还有额外的好处,即可以在其他地方显示评级(如搜索引擎代码段).

▶▶JSFiddle链接◀◀

<html>
<head>
<style>
@font-face {
    font-family:star-rating;
    src:url(data:application/x-font-ttf;base64,AAEAAAALAIAAAwAwT1MvMigiLIYAAAC8AAAAYGNtYXAmCyZNAAABHAAAAFRnYXNwAAAAEAAAAXAAAAAIZ2x5ZlNxiKoAAAF4AAABFGhlYWQBHDApAAACjAAAADZoaGVhA+IB6AAAAsQAAAAkaG10eAcAAAAAAALoAAAAHGxvY2EAjADoAAADBAAAABBtYXhwAAoAGAAAAxQAAAAgbmFtZYWP6p0AAAM0AAABaXBvc3QAAwAAAAAEoAAAACAAAwIAAZAABQAAAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAAAAAAAAAAAAAAAAAABAAAgAAAAAAAAAAAAAAAAAABAAAAl0AHg/+D/4AHgACAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEAEAAAAAMAAgAAgAEAAEAICXLJdD//f//AAAAAAAgJcslz//9//8AAf/j2jnaNgADAAEAAAAAAAAAAAAAAAAAAQAB//8ADwABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAACAAD/7QIAAdMACgAVAAABLwEPARcHNxcnNwUHNyc/AR8BBxcnAgCxT0+xgB6enh6A/wBwFlt9ODh9WxZwARkaoKAafLBTU7B8sjp8WBJxcRJYfDoAAAAAAQAA/+0CAAHTAAoAAAEvAQ8BFwc3Fyc3AgCxT0+xgB6enh6AARkaoKAafLBTU7B8AAAAAAIAAP/tAgAB0wAKABIAAAEvAQ8BFwc3Fyc3BTERHwEHFycCALFPT7GAHp6eHoD/ADh9WxZwARkaoKAafLBTU7B8sgEdcRJYfDoAAAABAAAAAQAA1qooUl8PPPUACwIAAAAAAM/+d7YAAAAAz/53tgAA/+0CAAHTAAAACAACAAAAAAAAAAEAAAHg/+AAAAIAAAAAAAIAAAEAAAAAAAAAAAAAAAAAAAAHAAAAAAAAAAAAAAAAAQAAAAIAAAACAAAAAgAAAAAAAAAACgAUAB4ASgBkAIoAAQAAAAcAFgACAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAA4ArgABAAAAAAABABYAAAABAAAAAAACAA4AYwABAAAAAAADABYALAABAAAAAAAEABYAcQABAAAAAAAFABYAFgABAAAAAAAGAAsAQgABAAAAAAAKADQAhwADAAEECQABABYAAAADAAEECQACAA4AYwADAAEECQADABYALAADAAEECQAEABYAcQADAAEECQAFABYAFgADAAEECQAGABYATQADAAEECQAKADQAhwBzAHQAYQByAC0AcgBhAHQAaQBuAGcAVgBlAHIAcwBpAG8AbgAgADEALgAwAHMAdABhAHIALQByAGEAdABpAG4AZ3N0YXItcmF0aW5nAHMAdABhAHIALQByAGEAdABpAG4AZwBSAGUAZwB1AGwAYQByAHMAdABhAHIALQByAGEAdABpAG4AZwBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABJAGMAbwBNAG8AbwBuAC4AAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==) format('truetype'),url(data:application/font-woff;base64,d09GRk9UVE8AAAUgAAoAAAAABNgAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAAA9AAAAWMAAAFjbsVsoU9TLzIAAAJYAAAAYAAAAGAoIiyGY21hcAAAArgAAABUAAAAVCYLJk1nYXNwAAADDAAAAAgAAAAIAAAAEGhlYWQAAAMUAAAANgAAADYBHDApaGhlYQAAA0wAAAAkAAAAJAPiAehobXR4AAADcAAAABwAAAAcBwAAAG1heHAAAAOMAAAABgAAAAYAB1AAbmFtZQAAA5QAAAFpAAABaYWP6p1wb3N0AAAFAAAAACAAAAAgAAMAAAEABAQAAQEBDHN0YXItcmF0aW5nAAECAAEAOvgcAvgbA/gYBB4KABlT/4uLHgoAGVP/i4sMB4tr+JT4dAUdAAAAjg8dAAAAkxEdAAAACR0AAAFaEgAIAQEMFxkbHiMoLXN0YXItcmF0aW5nc3Rhci1yYXRpbmd1MHUxdTIwdTI1Q0J1MjVDRnUyNUQwAAACAYkABQAHAQEEBwoNVn29/JQO/JQO/JQO+5QO+JT3rRX7RaU89zQ8+zT7RXH3FPsQbftE9zLe9zI4bfdE9xT3EAX7lPtGFfsEUaH3EDDj9xGdw/cFw/sF9xF5MDOh+xD7BMUFDviU960V+0WlPPc0PPs0+0Vx9xT7EG37RPcy3vcyOG33RPcU9xAFDviU960V+0WlPPc0PPs0+0Vx9xT7EG37RPcy3vcyOG33RPcU9xAF+5T7RhWLi4v3scP7BfcReTAzofsQ+wTFBQ74lBT4lBWLDAoAAAMCAAGQAAUAAAFMAWYAAABHAUwBZgAAAPUAGQCEAAAAAAAAAAAAAAAAAAAAAQAAIAAAAAAAAAAAAAAAAAAAQAAAJdAB4P/g/+AB4AAgAAAAAQAAAAAAAAAAAAAAIAAAAAAAAgAAAAMAAAAUAAMAAQAAABQABABAAAAADAAIAAIABAABACAlyyXQ//3//wAAAAAAICXLJc///f//AAH/49o52jYAAwABAAAAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAEAAOJjA1tfDzz1AAsCAAAAAADP/ne2AAAAAM/+d7YAAP/tAgAB0wAAAAgAAgAAAAAAAAABAAAB4P/gAAACAAAAAAACAAABAAAAAAAAAAAAAAAAAAAABwAAAAAAAAAAAAAAAAEAAAACAAAAAgAAAAIAAAAAAFAAAAcAAAAAAA4ArgABAAAAAAABABYAAAABAAAAAAACAA4AYwABAAAAAAADABYALAABAAAAAAAEABYAcQABAAAAAAAFABYAFgABAAAAAAAGAAsAQgABAAAAAAAKADQAhwADAAEECQABABYAAAADAAEECQACAA4AYwADAAEECQADABYALAADAAEECQAEABYAcQADAAEECQAFABYAFgADAAEECQAGABYATQADAAEECQAKADQAhwBzAHQAYQByAC0AcgBhAHQAaQBuAGcAVgBlAHIAcwBpAG8AbgAgADEALgAwAHMAdABhAHIALQByAGEAdABpAG4AZ3N0YXItcmF0aW5nAHMAdABhAHIALQByAGEAdABpAG4AZwBSAGUAZwB1AGwAYQByAHMAdABhAHIALQByAGEAdABpAG4AZwBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABJAGMAbwBNAG8AbwBuAC4AAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==) format('woff');
    font-weight:normal;
    font-style:normal;
}
body {
    font-family:sans-serif;
    font-size:x-large;
}
.rating {
    font-family:star-rating;
}
</style>
</head>
<body>
<ol>
    <li><span class="rating">???</span> = Awful</li>
    <li><span class="rating">???</span> = Bad</li>
    <li><span class="rating">???</span> = So-so</li>
    <li><span class="rating">???</span> = Good</li>
    <li><span class="rating">???</span> = Great</li>
    <li><span class="rating">???</span> = Brilliant</li>
</ol>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

您可以在icomoon.io等地方轻松制作自己的网络字体.

归档时间：	11 年，3 月前
查看次数：	10852 次
最近记录：	11 年，3 月前