34.SVG渐变
SVG渐变是一种以不均匀的方式用颜色填充形状的方式。这样，形状的填充或描边可以从一种颜色变到另一种颜色。这对于一些类型的图形看起来真的很好。
渐变示例
下面是为形状的填充和描边应用渐变后的样子：
第一个矩形的描边使用同样的颜色，但是填充色使用了渐变（从浅绿到深绿）。
第二个矩形在填充和描边上都使用了渐变。
第三个矩形在描边上使用了渐变，但无填充。
第四个矩形在填充上使用了渐变，但无描边。
有两种类型的渐变：
线性渐变
放射渐变
本文下面部分将对它们作详细介绍。
线性渐变
线性渐变以线性方式从一种颜色均匀地变化到另一种颜色。在本文开头你已经看到过一些简单的线性渐变的例子。
颜色可以垂直、水平或沿你定义的向量更改。你也可以只使用渐变填充形状的一部分，而不是整个形状。在我们继续解释之前，这里有一些视觉示例：
第一个矩形使用垂直渐变。第二矩形使用水平渐变。第三个矩形使用对角线渐变（向右下角变暗）。第四个矩形只对矩形的右半部分使用渐变。所有这一切都可以使用SVG线性渐变。
使用<linearGradient>元素定义线性渐变。示例如下：
正如你所看到的，<linearGradient>元素嵌套在<defs>元素内。渐变定义必须总是嵌套在一个<defs>元素内，以便以后在SVG图像中引用它们。此例中，在<rect>元素内使用style属性里的CSS属性fill（fill: url(#myLinearGradient1)）引用线性渐变。
<linearGradient>元素内嵌套了两个<stop>元素。<linearGradient>元素控制渐变的方向，以及应用渐变之前和之后发生什么（spreadMethod属性）。<stop>元素控制渐变使用的颜色，颜色开始和停止的位置，以及渐变的不透明度。
下面是<linearGradient>元素的属性列表：
下面是<stop>元素的属性列表：
阅读完上面这些属性描述后，你可能会觉得非常混乱。因此，我创建了一个图像，来说明这些属性的含义：
text { Font-Family: Ariel; Sans Serif; Font-Size: 8; } offset 10%offset 30%offset 70%offset 90%Padded with first colorPadded with last color
下面是与图像匹配的线性渐变定义：
第一个停止色是#00cc00，从矩形的开始到10%。因为spreadMethod设置为'pad'，所以第一种颜色也被填充在停止色之前（0-10%）的矩形部分。
从10%的第一个停止色开始，颜色朝向第二个停止色#006600变化，一直到矩形的30%处。
从30%的第二个停止色，颜色更改为第三个停止色#cc0000（红色），一直到矩形的70%处。
从70%的第三个停止色，颜色朝向第四个也是最后一个停止色#000099（蓝色）变化，一直到矩形的90%处。从矩形的90%处剩下的部分使用最后一个停止色（#000099）填充，这是因为spreadMethod属性被设置为'pad'。
放射渐变
放射渐变是其中的颜色以圆形而不是线性得变化。示例图片如下：
正如你所看到的，颜色现在以圆形方式改变。后三个（绿色）矩形仅在最浅绿色的辐射中心变化。第一个绿色矩形的颜色从其中心扩散。第二个矩形从顶部中心扩散。第三个矩形使用左上角为中心。
使用<radialGradient>元素定义放射渐变。示例如下：
上面的SVG代码实际上定义了例子中的第四个矩形。注意，使用<stop>元素定义颜色的方式和线性渐变一样（详细解释请参考线性渐变）。
<radialGradient>元素的属性列表：
放射渐变的中心是圆形放射源的中心。如果你将渐变画成一个圆，cx和cy标记这个圆的中心。
放射渐变的焦点是颜色辐射的角度。如果你把放射渐变看作一个灯，焦点决定灯光照射形状的角度。50%,50%表示直接从上面，5%,5%表示从左上角。这样，渐变看起来有一点像光源照射形状。
在你真正理解渐变的中心和焦点之前，你可能需要尝试改变它们的值。我这里只是为了创建这些简单的例子。
变换渐变
你可以使用标准的SVG变换函数为渐变添加变换，只要在<linearGradient>或<radialGradient>上使用gradientTransform属性。示例代码如下：
此示例定义了一个带gradientTransform属性的线性渐变，其将渐变旋转45度。正常情况下，渐变从上到下分级颜色，但随着旋转，它限制从右上角到左下角。
最终图片如下：
最后更新于