CSS 使用SVG填充星星的一半

在本文中，我们将介绍如何使用CSS和SVG来实现只填充星星一半的效果。通过这种方法，我们可以创建一个视觉上有趣且独特的样式。

阅读更多：CSS 教程

什么是SVG？

SVG代表可缩放矢量图形（Scalable Vector Graphics）。它是一种使用XML描述图形的技术。相比于传统的位图图像（如JPEG或PNG），SVG图像是矢量的，不会因为尺寸的缩放而失真。

使用SVG创建星星形状

首先，我们需要使用SVG来创建星星的形状。下面是一个示例的SVG代码，用于绘制一个五角星：

<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24">
  <path fill="#000" d="M12 2l3.09 6.82 7.07 1.09-5.13 4.87 1.21 7.04-6.24-3.28-6.24 3.28 1.21-7.04L1.84 9.91l7.07-1.09zM12 0h1v12.17l7.58 3.97-1.15-6.7 6.1-5.78-7.62-1.18L13 0z"/>
</svg>

这段代码将创建一个宽高为50像素的SVG画布，并在画布上绘制一个五角星。在<path>标签中，fill属性用于指定填充的颜色，d属性指定了绘制的路径。

使用CSS实现半星效果

我们可以使用CSS来覆盖SVG的填充，以实现星星的半填充效果。下面是一段示例的CSS代码，用于实现只填充星星一半的效果：

.star {
  width: 24px;
  height: 24px;
  fill: url(#half-fill);
  position: relative;
  overflow: hidden;
}

.star::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background-color: #ffc107;
  z-index: 1;
}

.star::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background-color: transparent;
  z-index: 2;
}

首先，我们给星星的容器元素添加了一个类名.star。在CSS中，我们设置了宽度和高度，并将填充颜色设置为一个线性渐变（url(#half-fill)）。接下来，我们使用伪元素::after和::before来分别绘制半填充的效果。

.star::after设置了一个背景颜色为黄色的矩形，宽度占容器的50%。.star::before则是一个透明的矩形，宽度同样占容器的50%。通过调整.star::after和.star::before的位置，我们可以实现星星的半填充效果。

示例

以下是一个示例，演示了如何使用SVG和CSS来实现星星的半填充效果。

<div class="star">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
    <path fill="#000" d="M12 2l3.09 6.82 7.07 1.09-5.13 4.87 1.21 7.04-6.24-3.28-6.24 3.28 1.21-7.04L1.84 9.91l7.07-1.09zM12 0h1v12.17l7.58 3.97-1.15-6.7 6.1-5.78-7.62-1.18L13 0z"/>
    <linearGradient id="half-fill">
      <stop offset="0" stop-color="#ffc107" />
      <stop offset="0.5" stop-opacity="0"/>
    </linearGradient>
  </svg>
</div>