34.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>元素嵌套在<defs>元素内。渐变定义必须总是嵌套在一个<defs>元素内,以便以后在SVG图像中引用它们。此例中,在<rect>元素内使用style属性里的CSS属性fillfill: url(#myLinearGradient1))引用线性渐变。

<linearGradient>元素内嵌套了两个<stop>元素。<linearGradient>元素控制渐变的方向,以及应用渐变之前和之后发生什么(spreadMethod属性)。<stop>元素控制渐变使用的颜色,颜色开始和停止的位置,以及渐变的不透明度。

下面是<linearGradient>元素的属性列表:

属性

描述

id

用于在形状上引用此渐变的唯一ID

x1, y1

定义渐变方向向量的x1和y1(起始点)。应用渐变的形状的x1,y1和x2,y2指定为百分比(%)。(注意:你也可以使用绝对数值,但是这似乎在浏览器中不工作)。

x2, y2

定义渐变方向向量的x2和y2(终点)

spreadMethod

这个值定义渐变如何在形状上展开。有三个可能的值:pad,repeat和reflect。'pad'表示渐变的前/后颜色在渐变之前和之后被填充(展开)。'repeat'表示在整个形状上重复渐变。'reflect'表示渐变在形状上被镜像。扩展方法仅在渐变未完全填充形状时有效(请参阅<stop>元素的offset属性)。

gradientTransform

在渐变被应用前,你可以对其作变换(如旋转)。相关更多信息,请参阅SVG变换

gradientUnits

设置使用视图框('userSpaceOnUse')还是应用渐变的图形对象,来计算x1,y1和x2,y2。

xlink:href

此渐变为所继承属性的另一渐变的ID。换句话说,对于任何属性,如果在此渐变中没有设置属性值,则引用渐变的属性值将是此渐变的默认值。

下面是<stop>元素的属性列表:

属性

描述

offset

渐变的第一种颜色在形状上的开始位置或最后一种颜色的结束位置。指定为应用渐变的形状(真正的渐变向量)的百分比。例如,10%表示颜色应该在形状的10%处开始/停止。

stop-color

停止点的颜色。渐变从这个颜色开始改变或者改变到这个颜色。

stop-opacity

停止点颜色的不透明度。如果不透明度从一个停止点的1变为另一个停止点的0,则颜色将变得越来越透明。

阅读完上面这些属性描述后,你可能会觉得非常混乱。因此,我创建了一个图像,来说明这些属性的含义:

text { Font-Family: Ariel; Sans Serif; Font-Size: 8; } offset 10%offset 30%offset 70%offset 90%Padded with first colorPadded with last color

下面是与图像匹配的线性渐变定义:

<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)填充,这是因为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>元素的属性列表:

属性

描述

id

用于在形状中引用渐变的唯一ID

cx, cy

放射渐变中心的x和y坐标,指定为填充形状宽度和高度的百分比,默认值为50%。

fx, fy

放射渐变焦点的x和y坐标,指定为填充形状宽度和高度的百分比,默认值为50%。

r

渐变的半径

spreadMethod

这个值定义渐变如何在形状上展开。有三个可能的值:pad,repeat和reflect。'pad'表示渐变的前/后颜色在渐变之前和之后被填充(展开)。'repeat'表示在整个形状上重复渐变。'reflect'表示渐变在形状上被镜像。扩展方法仅在渐变未完全填充形状时有效(请参阅<stop>元素的offset属性)。

gradientTransform

在渐变被应用前,你可以对其作变换(如旋转)。相关更多信息,请参阅SVG变换

gradientUnits

设置使用视图框('userSpaceOnUse')还是应用渐变的图形对象,来计算x1,y1和x2,y2。

xlink:href

此渐变为所继承属性的另一渐变的ID。换句话说,对于任何属性,如果在此渐变中没有设置属性值,则引用渐变的属性值将是此渐变的默认值。

放射渐变的中心是圆形放射源的中心。如果你将渐变画成一个圆,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度。正常情况下,渐变从上到下分级颜色,但随着旋转,它限制从右上角到左下角。

最终图片如下:

最后更新于