SVG渐变可以定义为从一种颜色到另一种颜色的平滑过渡。在SVG中，有两种类型的渐变,分别为：线性渐变和径向渐变
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>-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 | 该停止点的颜色。渐变的颜色从/变为。 |
| 此停止点的颜色的不透明度。如果不透明度从具有1的一个停止点变为具有0的另一个停止点，则颜色将逐渐变得越来越透明。 |
记住所有这些属性描述不容易。这个创建了一个图像来说明这些属性的含义：
这是与图像匹配的线性渐变定义：
<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度。通常，渐变会将颜色从上到下分级，但是现在通过旋转，它从右上角到左下角。
运行后图像效果：