CSS 用重复线性渐变颜色填充SVG元素

在本文中，我们将介绍如何使用CSS来填充SVG元素，并创建一个重复线性渐变颜色效果。SVG（可缩放矢量图形）是一种用于描述二维矢量图形的XML语言，可以通过CSS来修改其外观。我们将使用CSS中的线性渐变属性来为SVG元素创建一个循环重复的颜色效果。

阅读更多：CSS 教程

创建一个SVG元素

首先，我们需要创建一个SVG元素，以便在其中展示我们的线性渐变颜色效果。SVG元素可以在HTML文档中使用<svg>标签来创建。代码如下所示：

<svg width="200" height="200">
  <rect x="0" y="0" width="100%" height="100%" fill="url(#gradient)" />
</svg>

在上述代码中，我们创建了一个200×200像素的SVG画布，并在其中添加了一个矩形元素<rect>。矩形的样式通过fill属性来定义，我们将在接下来的部分中创建一个线性渐变颜色来填充它。

创建线性渐变颜色

要创建一个线性渐变颜色，我们可以使用CSS中的linear-gradient()函数。该函数接受一系列的色标作为参数，定义了渐变的起始和结束颜色以及颜色的过渡位置。

考虑到我们要创建一个重复线性渐变颜色，我们需要使用repeating-linear-gradient()函数而不是linear-gradient()函数。下面是一个示例代码，创建了一个红色到绿色的渐变：

#gradient {
  fill: repeating-linear-gradient(
    45deg,
    red,
    green 30px
  );
}

在上述代码中，我们为fill属性指定了一个ID选择器#gradient，该属性将填充SVG矩形元素。repeating-linear-gradient()函数采用了两个参数，第一个参数用于指定渐变的角度（这里是45度），第二个参数用于指定颜色过渡。在示例中，我们使用了红色和绿色，并在每30像素后重复一次。