CSS 用渐变填充SVG形状

在本文中，我们将介绍如何使用CSS渐变来填充SVG形状。SVG（Scalable Vector Graphics）是一种用于呈现二维图形和动画的XML标记语言。与传统的位图图像相比，SVG图像可以无损缩放并保持清晰度，因此非常适用于在不同大小的屏幕上显示。

阅读更多：CSS 教程

使用线性渐变填充SVG形状

线性渐变是一种沿着一条直线的渐变效果。我们可以使用CSS的linear-gradient()函数来创建线性渐变。以下是一个使用线性渐变填充SVG矩形的示例：

<svg width="400" height="200">
  <rect x="50" y="50" width="300" height="100" fill="url(#linear-gradient)" />

  <defs>
    <linearGradient id="linear-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="red" />
      <stop offset="100%" stop-color="blue" />
    </linearGradient>
  </defs>
</svg>

在上面的示例中，我们创建了一个宽度为400像素，高度为200像素的SVG容器，并在其中绘制了一个宽度为300像素，高度为100像素的矩形。矩形的填充颜色通过fill属性来指定，我们使用了名为“linear-gradient”的线性渐变。

在defs元素中，我们定义了一个linearGradient元素，并为其指定了id属性。linearGradient元素有四个属性：x1，y1，x2和y2，用于定义渐变的方向。这里的0%和100%表示渐变的起始点和结束点。stop元素用来指定渐变的颜色和位置偏移，这里我们使用了红色和蓝色两种颜色。

通过这种方式，我们可以创建各种样式的线性渐变填充。只需调整x1，y1，x2和y2的值，以及stop元素的偏移和颜色，即可实现不同的效果。

使用径向渐变填充SVG形状

径向渐变是一种由内向外以圆形（或椭圆形）的方式渐变的效果。我们可以使用CSS的radial-gradient()函数来创建径向渐变。以下是一个使用径向渐变填充SVG圆形的示例：

<svg width="400" height="400">
  <circle cx="200" cy="200" r="150" fill="url(#radial-gradient)" />

  <defs>
    <radialGradient id="radial-gradient" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="yellow" />
      <stop offset="100%" stop-color="green" />
    </radialGradient>
  </defs>
</svg>

在上面的示例中，我们创建了一个宽度为400像素，高度为400像素的SVG容器，并在其中绘制了一个以（200，200）为中心，半径为150像素的圆形。圆形的填充颜色通过fill属性来指定，我们使用了名为“radial-gradient”的径向渐变。

radialGradient元素与linearGradient元素类似，也有id属性和圆心坐标（cx和cy属性），以及半径（r属性）。stop元素也用来指定渐变的颜色和位置偏移。

通过调整cx，cy和r的值，以及stop元素的偏移和颜色，我们可以创建各种样式的径向渐变填充。例如，改变半径的大小，可以使渐变效果在圆形内外扩张或收缩。

混合渐变填充SVG形状

除了线性渐变和径向渐变，我们还可以将它们混合在一起以创建更复杂的渐变效果。以下是一个使用混合渐变填充SVG矩形的示例：

<svg width="400" height="200">
  <rect x="50" y="50" width="300" height="100" fill="url(#multi-gradient)" />

  <defs>
    <linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="purple" />
      <stop offset="100%" stop-color="pink" />
    </linearGradient>

    <radialGradient id="radial" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="yellow" />
      <stop offset="100%" stop-color="green" />
    </radialGradient>

    <linearGradient id="multi-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="url(#linear)" />
      <stop offset="100%" stop-color="url(#radial)" />
    </linearGradient>
  </defs>
</svg>

在上面的示例中，我们定义了两个单独的渐变：一个线性渐变和一个径向渐变。然后，我们创建了一个新的渐变，并在其中使用了之前定义的两个渐变。通过将stop元素的stop-color属性设置为url(#linear)和url(#radial)，我们可以引用之前定义的渐变。

通过这种方式，我们可以实现各种复杂的混合渐变效果来填充SVG形状。