用 SVG 只填充半颗星答案

【问题标题】：Fill only Half a star with SVG用 SVG 只填充半颗星
【发布时间】：2022-03-22 05:17:21
【问题描述】：

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

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

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

这在 SVG 中可行吗？

【问题讨论】：

Clipping and masking
最坏的情况，你总是可以只画两个半星，每个半星都有一种颜色。
相关：stackoverflow.com/q/8783817

标签： css svg

【解决方案1】：

创建一个线性渐变来填充星星。 2 个停靠点可确保即时过渡。

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

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

【讨论】：

很好的解决方案。对于那些不太熟悉 SVG 的人，我会举例说明如何设置填充，例如 <path fill="url(#grad)" ...

【解决方案2】：

根据您的目标受众，某些旧版浏览器上的<use> 无法得到很好的支持。另一种方法是使用函数在<defs> 之外绘制<path>。 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>

【讨论】：

一些浏览器（例如 Chrome 60.0.3112.90）保留原始 ID 并缓存 svg，因此当引用相同的 id 时，它会重复内存中的第一个 svg。当使用星星作为 svgs 时，通常使用超过 1 来在网络上显示诸如评级之类的东西 - 如果您要复制和粘贴此 sn-p（例如多个星星 svgs），请为 linearGradient id 分配一个唯一 ID和 path fill 对于每个 svg
你可以设置为 viewBox="0 0 2048 2048" 而不是宽度和高度来设置星星的大小

【解决方案3】：

为什么不使用网络字体？

我知道您问过如何修改 SVG 图像，但您是否考虑过使用网络字体？

创建包含完整、半完整和空星形字形的字体非常容易。这些可以映射到您喜欢的任何代码点——在下面的示例中，我使用了这三个字符●、◐ 和○。或者，您可以使用“★”、“½”和“&nbsp;”。 也许有一天 Unicode 实际上会包含一个半满的星号，但还没有。（但如果你需要pile of poo...）

使用网络字体，您可以获得与使用 SVG 相同的结果，但额外的好处是评级可以显示在其他地方（如搜索引擎 sn-ps）。

▶▶ JSFiddle link ◀◀

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

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

【讨论】：

这是一个很好的答案，但对我来说，我们决定为我们的图标/视网膜坚持使用 SVG，所以宁愿保持一致。但对其他人来说，这是一个非常好的解决方案。
对于webfonts，有时我们需要显示4.3点。不幸的是，Webfonts 有完整、空白和半星图标。

【解决方案4】：

我在所有答案中都使用了所有技巧，它们都是 100% 正确的，但是我还有一些我没有提到的额外要求。我需要有不同的尺寸和颜色，并用 css 改变它们。所以我发现最简单的方法是制作一个 2 部分的 svg 图标。

结果如下：

http://jsbin.com/vikoju/3/

如果我使用网络字体，我可能会选择那个解决方案。

谢谢大家

【讨论】：