SVG渐变是一种以不均匀的方式用颜色填充形状的方法。这样，形状的填充或者笔触就可以从一种颜色变为另一种颜色。对于某些类型的图形，这看起来确实不错。

有两种类型的渐变：

• 线性渐变
• 径向渐变

以下各节将介绍这两个方面。

线性渐变

线性渐变从一种颜色到另一种颜色以线性方式均匀变化。在本文开头，我们已经看到了一些简单的线性渐变示例。

颜色可以垂直，水平或者沿我们定义的矢量变化。我们也可以只用渐变填充形状的一部分，而不是整个形状。在继续说明之前，这里有一些视觉示例：

第一个矩形使用垂直渐变。第二个矩形使用水平渐变。第三个矩形使用对角线渐变(朝右下角变暗)。第四个矩形仅用渐变填充矩形的右半部分。使用SVG的线性渐变，所有这些都是可能的。

线性渐变是使用<linearGradient>元素定义的。这是一个例子：

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">

  <defs>
    <linearGradient id="myLinearGradient1"
                    x1="0%" y1="0%"
                    x2="0%" y2="100%"
                    spreadMethod="pad">
      <stop offset="0%"   stop-color="#00cc00" stop-opacity="1"/>
      <stop offset="100%" stop-color="#006600" stop-opacity="1"/>
    </linearGradient>
  </defs>

  <rect x="10" y="10" width="75" height="100" rx="10" ry="10"
     style="fill:url(#myLinearGradient1);
            stroke: #005000;
            stroke-width: 3;" />

</svg>

如我们所见，<linearGradient>元素嵌套在 <defs>元素内。渐变定义必须始终嵌套在 <defs>元素中，因此以后可以在SVG图像中引用它们。在此示例中，线性渐变由其style属性中的 <rect>-element引用，位于fillCSS属性中(fill：url(#myLinearGradient1))

" <linearGradient>"元素具有两个嵌套的" <stop>"元素。 " <linearGradient>"元素控制渐变的方向以及在应用渐变之前和之后发生的事情(" spreadMethod"属性)。 " <stop>"元素控制渐变中使用的颜色，颜色开始和停止到形状的距离以及渐变的不透明度。

这是 <linearGradient>-元素的属性的列表：

示例：

<svg xmlns="http://www.w3.org/2000/svg"
         xmlns:xlink="http://www.w3.org/1999/xlink">

    <defs>
      <linearGradient id="myLinearGradient1"
                      x1="0%" y1="0%"
                      x2="100%" y2="0%"
                      spreadMethod="pad">
        <stop offset="10%" stop-color="#00cc00" stop-opacity="1"/>
        <stop offset="30%" stop-color="#006600" stop-opacity="1"/>

        <stop offset="70%" stop-color="#cc0000" stop-opacity="1"/>
        <stop offset="90%" stop-color="#000099" stop-opacity="1"/>

      </linearGradient>

    </defs>

    <rect x="10" y="10" width="500" height="50" rx="10" ry="10"
       style="fill:url(#myLinearGradient1); stroke: #005000;
              stroke-width: 3;" />

    </svg>

第一个停止颜色是#00cc00，将从10％开始进入矩形。由于" spreadMethod"设置为" pad"，因此第一种颜色也将填充到矩形的第一种停止颜色之前(0-10％)。

从第一个停止色的10％起，颜色变为第二个停止色#006600，在矩形中达到了30％。

从第二个终止色的30％变为第三个终止色#cc0000(红色)，在矩形中达到70％。

从70％的第三个停止颜色开始，颜色变为第四个和最后一个停止颜色#000099(蓝色)，达到90％。从90％到矩形的其余部分，最后一个终止色(#000099)填充到矩形中，因为<linearGradient>元素的spreadMethod属性设置为" pad"。

径向渐变

径向渐变是其中颜色呈圆形而非线性变化的渐变。这是一个示例图像：

如我们所见，颜色现在以圆形方式变化。最后三个(绿色)矩形仅在最浅绿色的辐射中心发生变化。第一个绿色矩形具有从矩形中心散布的颜色。第二个矩形使用矩形的顶部中间。第三个矩形以左上角为中心。

径向渐变是使用<radialGradient>元素定义的。这是一个例子：

<svg xmlns="http://www.w3.org/2000/svg"
         xmlns:xlink="http://www.w3.org/1999/xlink">

    <defs>
        <radialGradient id="myRadialGradient4"
           fx="5%" fy="5%" r="65%"
           spreadMethod="pad">
          <stop offset="0%"   stop-color="#00ee00" stop-opacity="1"/>
          <stop offset="100%" stop-color="#006600" stop-opacity="1" />
        </radialGradient>
    </defs>

    <rect x="340" y="10" width="100" height="100" rx="10" ry="10"
           style="fill:url(#myRadialGradient4);
                  stroke: #005000; stroke-width: 3;" />
</svg>

该SVG代码实际上定义了上面示例中显示的第四个矩形。注意如何使用 <stop>元素定义颜色，就像线性渐变一样。

这是 <radialGradient>元素的属性的列表：

径向渐变的中心是圆形颜色散布的中心。如果将径向渐变描述为一个圆，则cx和cy标记该圆的中心。

径向渐变的焦点是彩色辐射的"角度"。如果我们将径向渐变视为一盏灯，则焦点将决定灯发出的光与该形状碰撞的角度。 50％，50％表示直接从上方。 5％，5％表示从左上角向下。渐变看起来有点像光源照到形状。

在正确设置渐变之前，我们很可能必须先尝试一下渐变的中心和焦点。我知道我这样做是为了创建这些简单的示例。

渐变

我们可以使用标准SVG转换函数来转换渐变。我们可以使用<linearGradient>和<radialGradient>中的gradientTransform属性来实现。这是一个例子：

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">

  <defs>
    <linearGradient id="myLinearGradient1"
                    x1="0%" y1="0%"
                    x2="0%" y2="100%"
                    spreadMethod="pad"
                    gradientTransform="rotate(45)"
    >
      <stop offset="0%"   stop-color="#00cc00" stop-opacity="1"/>
      <stop offset="100%" stop-color="#006600" stop-opacity="1"/>
    </linearGradient>
  </defs>

  <rect x="10" y="10" width="75" height="100" rx="10" ry="10"
     style="fill:url(#myLinearGradient1);
            stroke: #005000;
            stroke-width: 3;" />

</svg>

本示例使用" gradientTransform()"属性定义了一个线性渐变，它将渐变旋转了45度。通常，渐变会将颜色从上到下分级，但是现在通过旋转，它从右上角到左下角。