SVG基础SVG图形填充颜色

前言

在SVG（可缩放矢量图形）中，我们经常需要为图形填充颜色，以便使其更具视觉吸引力。本文将介绍如何使用SVG图形填充颜色，包括填充纯色、线性渐变和径向渐变。

1. 填充纯色

使用SVG填充纯色是最简单的方式之一。可以使用CSS属性来指定填充颜色，每个SVG图形元素都有一个fill属性。

  <svg>
    <rect x="20" y="20" width="100" height="100" fill="red" />
  </svg>

在上面的例子中，我们使用<rect>元素绘制了一个红色矩形。填充颜色属性fill被设置为red。

2. 使用线性渐变填充

SVG还支持使用线性渐变填充图形，这可以给图形带来更丰富的外观。我们可以使用<linearGradient>元素来定义线性渐变。

  <svg>
    <defs>
      <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%" style="stop-color:blue;stop-opacity:1" />
        <stop offset="100%" style="stop-color:green;stop-opacity:1" />
      </linearGradient>
    </defs>
    <rect x="20" y="20" width="100" height="100" fill="url(#grad)" />
  </svg>

在上面的例子中，我们使用<linearGradient>元素定义了一个线性渐变，被赋予了一个唯一的IDgrad。通过定义两个<stop>元素来设置渐变的起点和终点颜色。

3. 使用径向渐变填充

SVG还支持使用径向渐变填充图形，使图形看起来更加复杂和立体。我们可以使用<radialGradient>元素来定义径向渐变。

  <svg>
    <defs>
      <radialGradient id="grad" cx="50%" cy="50%" r="50%">
        <stop offset="0%" style="stop-color:red;stop-opacity:1" />
        <stop offset="100%" style="stop-color:yellow;stop-opacity:1" />
      </radialGradient>
    </defs>
    <rect x="20" y="20" width="100" height="100" fill="url(#grad)" />
  </svg>

在上面的例子中，我们使用<radialGradient>元素定义了一个径向渐变，同样被分配了一个唯一的IDgrad。可以通过定义两个<stop>元素来设置渐变的起点和终点颜色。

结论

通过使用SVG图形填充颜色，我们可以为图形增添视觉吸引力，并使其更加生动。我们可以使用纯色填充、线性渐变和径向渐变，根据需要选择适合的填充方式。随着对SVG的更深入了解，将能够创造出更丰富多样的图形效果。