编辑这个页面须要登录或更高权限！

SVG 渐变

SVG渐变可以定义为从一种颜色到另一种颜色的平滑过渡。在SVG中，有两种类型的渐变,分别为：线性渐变和径向渐变

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

渐变示例

这是将渐变应用于形状填充和笔触的外观：

第一个矩形始终具有相同的笔触颜色，但是渐变填充颜色（浅到深绿色）。
   第二个矩形在其笔触和填充颜色上都应用了渐变。
   第三个矩形具有应用于笔划的渐变，但没有填充。
   第四个矩形已将渐变应用于填充，但没有笔触。

有两种类型的渐变：

  1. 线性渐变

  2. 径向渐变

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

线性渐变

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

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

第一个矩形使用垂直渐变。第二个矩形使用水平渐变。第三个矩形使用对角渐变（朝右下角变暗）。第四个矩形仅用渐变填充矩形的右半部分。使用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>-element嵌套在<defs>-element内。渐变定义必须始终嵌套在<defs>-element内，因此以后可以在SVG图像中引用它们。在此示例中，线性渐变由CSS属性（(fill:url(#myLinearGradient1))）中 <rect>其style属性内的-element 引用。

本<linearGradient>-元素有两个嵌套<stop>-elements。的<linearGradient>-元素控制梯度的什么之前和梯度被施加后（的发生方向和spreadMethod属性）。该<stop>-elements控制在渐变中使用的颜色，多远的形状颜色启停，加上渐变的不透明度。

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

属性描述
ID用于从形状引用此渐变定义的唯一ID。
x1，y1向量的x1和y1（起点）定义了梯度的方向。指定为应用渐变的形状的x1，y1和x2，y2的百分比（％）。（注意：您应该可以使用绝对数字，但这在浏览器中似乎不起作用）。
x2，y2向量的x2和y2（端点）定义了梯度的方向。
spreadMethod此值定义渐变如何在形状中扩展。共有3种可能的值：填充，重复和反射。“ pad”表示渐变的第一个/最后一个颜色在渐变之前和之后进行填充（展开）。“重复”是指在整个形状中重复渐变。“反射”是指渐变在形状上反映出来。仅当渐变不能完全填充形状时才使用散布方法（请参见元素的offset            属性<stop>）。
gradientTransform您可以在应用渐变之前对其进行变换（例如旋转）。有关更多详细信息，请参见 SVG转换。
gradientUnits设置是否要使用视图框（'userSpaceOnUse'）或要应用渐变的形状来计算x1，y1和x2，y2。
xlink：href另一个渐变的ID，此渐变应从该ID“继承”其属性。换句话说，对于任何属性，如果在此渐变中未设置任何属性值，则参考渐变的属性值将是该渐变的默认值。

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

属性描述
offset该颜色开始（如果渐变的第一种颜色）或停止（如果渐变的最后一种颜色）到达形状的距离。指定为应用渐变的形状的百分比（实际上是渐变矢量）。例如，10％表示颜色应开始/停止10％的形状。
stop-color
该停止点的颜色。渐变的颜色从/变为。
stop-opacity此停止点的颜色的不透明度。如果不透明度从具有1的一个停止点变为具有0的另一个停止点，则颜色将逐渐变得越来越透明。

记住所有这些属性描述不容易。这个创建了一个图像来说明这些属性的含义：

offset 10%offset 30%offset 70%offset 90%第一个填充色最后一个填充色

这是与图像匹配的线性渐变定义：

    <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被设置为“垫”，第一颜色也被填充到矩形之前的第一站颜色（0-10％）。

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

从第二个终止色的30％变为第三个终止色#cc0000（红色），到达矩形的70％。

从第三个停止色的70％变为第四个和最后一个停止色#000099（蓝色），达到90％。从90％到矩形的其余部分，最后一个终止色（#000099）被填充到矩形中，因为spreadMethod    该<linearGradient>元素的属性设置为“ pad”。

径向渐变

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

正如您看到的，颜色现在以圆形方式变化。最后三个（绿色）矩形仅在最浅绿色的辐射中心发生变化。第一个绿色矩形具有从矩形中心散布的颜色。第二个矩形使用矩形的顶部中间。第三个矩形以左上角为中心。

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

<svg width="512" height="120">
<defs>
<radialgradient id="myRadialGradient4" fx="5%" fy="5%" r="65%" spreadmethod="pad"><stop offset="0%" stop-color="#00ee00" stop-opacity="1"></stop>
<stop offset="100%" stop-color="#006600" stop-opacity="1"></stop></radialgradient></defs>
<rect x="340" y="10" width="100" height="100" rx="10" ry="10" style="fill:url(#myRadialGradient4); stroke: #005000; stroke-width: 3;"></rect>
   </svg>
测试看看‹/›

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

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

属性描述
ID用于从形状引用此渐变定义的唯一ID。
cy，cy径向渐变中心的x和y。指定为要填充的形状的宽度和高度的百分比。如果省略，则默认均为50％。
fx，fy径向渐变焦点的x和y。指定为要填充的形状的宽度和高度的百分比。如果省略，则默认均为50％。
           注意：Firefox 3.0.5的值似乎低于5％。
[R渐变的半径。
spreadMethod此值定义渐变如何在形状中扩展。共有3种可能的值：填充，重复和反射。“ pad”表示渐变的第一个/最后一个颜色在渐变之前和之后进行填充（展开）。“重复”是指在整个形状中重复渐变。“反射”是指渐变在形状上反映出来。仅当渐变不能完全填充形状时才使用散布方法（请参见元素的offset            属性<stop>）。
gradientTransform您可以在应用渐变之前对其进行变换（例如旋转）。有关常规转换的更多详细信息，请参见SVG转换。
gradientUnits设置是否要使用视图框（'userSpaceOnUse'）或要应用渐变的形状来计算x1，y1和x2，y2。您通常可以忽略此属性。
xlink：href另一个渐变的ID，此渐变应从该ID“继承”其属性。换句话说，对于任何属性，如果在此渐变中未设置任何属性值，则参考渐变的属性值将是该渐变的默认值。

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

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

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

变换渐变

您可以使用标准SVG转换功能来转换渐变。这样做使用gradientTransform属性，无论是在<linearGradient>和     <radialGradient>。这是一个示例：

<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度。通常，渐变会将颜色从上到下分级，但是现在通过旋转，它从右上角到左下角。

运行后图像效果：

SVG 填充图案SVG 转换