解决评价打分组件 SVG 半颗星的方法

1. 任务
2. 实现
3. 添加 aria-label
4. 如何重用 SVG
5. 星星的样式
6. 半颗星
• 使用 <masks>
7. 带有 SVG 渐变的半星
8. 轮廓样式
9. SVG Mask 解决轮廓样式的问题
10. SVG 渐变实现轮廓样式
11. 大小

对于一个内容服务的网站来说评价打分也是很重要的一部分，它有利于分析用户对我们的内容的喜好程序。最近，我们团需要为一个项目实现一个星级评价的组件，需求如下：

• 性能(不能用图片)
• 可调整的大小
• 可访问性
• 小数位打分（如：3.5或3.2）
• 使用 css 就可以直接控制样式

要达到上面的要求，经常调研，最终选择了 SVG 方案。

任务

下图是我们最终想要的效果：

为了解决这个问题，我们需要另一个星形轮廓。可以通过复制<use>元素并删除它的 mask 来实现这一点。

<p >
   <svg  width="32" height="32" viewBox="0 0 32 32">
      <use href="#star" mask="url(#half)" fill="green"></use>
      <use href="#star" fill="none" stroke="grey"></use>
   </svg>
</p>

注意，我们有两个<use>元素。一个带mask的，一个只有 stroke 的。这就是使用 SVG masks 实现轮廓样式的方法。

事例地址：点击链接

SVG 渐变实现轮廓样式

对于渐变解决方案，我们不需要复制图标，因为没有mask 。我们需要做的是添加一个stroke，它就完成了。

<svg style="width: 0; height: 0;" viewBox="0 0 32 32">
   <defs>
      <linearGradient id="half" x1="0" x2="100%" y1="0" y2="0">
        <stop offset="50%" stop-color="#f7efc5"></stop>
        <stop offset="50%" stop-color="#fed94b"></stop>
      </linearGradient>
   </defs>
</svg>

<p >
   <svg  width="32" height="32" viewBox="0 0 32 32">
     <use href="#star" fill="url(#half)" stroke="grey"></use>
   </svg>
</p>

事例地址：点击链接

大小

通过使用 CSS 变量并确保 SVG 具有正确的viewBox属性，我们可以轻松地调整它们的大小。

.c-icon {
    width: var(--size, 24px)
    height: var(--size, 24px);
}

.c-icon--md {
    --size: 40px;
}

.c-icon--lg {
    --size: 64px;
}