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

运行后图像效果: