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属性fill（fill: 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度。正常情况下，渐变从上到下分级颜色，但随着旋转，它限制从右上角到左下角。

最终图片如下：

上一页33.SVG变换下一页35.SVG填充图案

最后更新于