SVG - 渐变

渐变是指在一个形状内一种颜色到另一种颜色的平滑过渡。SVG 提供两种类型的渐变。

线性渐变 - 表示从一个方向到另一个方向的一种颜色到另一种颜色的线性过渡。
径向渐变 - 表示从一个方向到另一个方向的一种颜色到另一种颜色的圆形过渡。

线性渐变

声明

以下是<linearGradient>元素的语法声明。我们只显示了主要属性。

<linearGradient
   gradientUnits ="units to define co-ordinate system of contents of gradient"
   gradientTransform = "definition of an additional transformation from the gradient coordinate system onto the target coordinate system"
   
   x1="x-axis co-ordinate" 
   y1="y-axis co-ordinate"     
   x2="x-axis co-ordinate" 
   y2="y-axis co-ordinate"     
   
   spreadMethod="indicates method of spreading the gradient within graphics element"
   xlink:href="reference to another gradient" >
</linearGradient>

属性

序号	名称和描述
1	gradientUnits - 用于定义渐变内各种长度值的坐标系。如果 gradientUnits="userSpaceOnUse"，则值表示在使用渐变元素时当前用户坐标系中的值。如果 patternContentUnits="objectBoundingBox"，则值表示在使用渐变元素时引用元素边界框的分数或百分比。默认为 userSpaceOnUse。
2	x1 - 渐变向量的 x 轴坐标。默认为 0。
3	y1 - 渐变向量的 y 轴坐标。默认为 0。
4	x2 - 渐变向量的 x 轴坐标。默认为 0。
5	y2 - 渐变向量的 y 轴坐标。默认为 0。
6	spreadMethod - 指示在图形元素内扩展渐变的方法。默认为 'pad'。
7	xlink:href - 用于引用另一个渐变。

示例

testSVG.htm

<html>
   <title>SVG Linear Gradient</title>
   <body>
   
      <h1>Sample SVG Linear Gradient</h1>
   
      <svg width="600" height="600">
      
         <defs>
            <linearGradient id="sampleGradient">
               <stop offset="0%" stop-color="#FF0000" />
               <stop offset="100%" stop-color="#00FFF00" />
            </linearGradient>
         </defs>
         
         <g>
            <text x="30" y="50" >Using Linear Gradient: </text>
            <rect x="100" y="100" width="200" height="200" stroke="green" stroke-width="3" 
            fill="url(#sampleGradient)" />
         </g>
         
      </svg>
   
   </body>
</html>

一个 <linearGradient> 元素定义为 sampleGradient。
在 linearGradient 中，定义了两个偏移量和两种颜色。
在 rect 元素中，在 fill 属性中，指定了渐变的 url，以使用之前创建的渐变填充矩形。

输出

在 Chrome 浏览器中打开 textSVG.htm。您可以使用 Chrome/Firefox/Opera 直接查看 SVG 图片，无需任何插件。Internet Explorer 9 及更高版本也支持 SVG 图片渲染。

径向渐变

声明

以下是<radialGradient>元素的语法声明。我们只显示了主要属性。

<radialGradient
   gradientUnits ="units to define co-ordinate system of contents of gradient"
   gradientTransform = "definition of an additional transformation from the gradient coordinate system onto the target coordinate system"
   
   cx="x-axis co-ordinate of center of circle." 
   cy="y-axis co-ordinate of center of circle."     
   
   r="radius of circle" 
   
   fx="focal point for the radial gradient"     
   fy="focal point for the radial gradient"     
   
   spreadMethod="indicates method of spreading the gradient within graphics element"
   xlink:href="reference to another gradient" >
</radialGradient>

属性

序号	名称和描述
1	gradientUnits - 用于定义渐变内各种长度值的坐标系。如果 gradientUnits="userSpaceOnUse"，则值表示在使用渐变元素时当前用户坐标系中的值。如果 patternContentUnits="objectBoundingBox"，则值表示在使用渐变元素时引用元素边界框的分数或百分比。默认为 userSpaceOnUse。
2	cx - 渐变向量最大圆中心的 x 轴坐标。默认为 0。
3	cy - 渐变向量最大圆中心的 y 轴坐标。默认为 0。
4	r - 渐变向量最大圆的半径。默认为 0。
5	fx - 径向渐变的焦点。默认为 0。
6	fy - 径向渐变的焦点。默认为 0。
7	spreadMethod - 指示在图形元素内扩展渐变的方法。默认为 'pad'。
8	xlink:href - 用于引用另一个渐变。

示例

testSVG.htm

<html>
   <title>SVG Radial Gradient</title>
   <body>
      
      <h1>Sample SVG Radial Gradient</h1>
      
      <svg width="600" height="600">
         <defs>
            <radialGradient id="sampleGradient">
               <stop offset="0%" stop-color="#FF0000" />
               <stop offset="100%" stop-color="#00FFF00" />
            </radialGradient>
         </defs>
         
         <g>
            <text x="30" y="50" >Using Radial Gradient: </text>
            <rect x="100" y="100" width="200" height="200" stroke="green" stroke-width="3"
            fill="url(#sampleGradient)" />
         </g>
      </svg>
      
   </body>
</html>

一个 <radialGradient> 元素定义为 sampleGradient。
在 radialGradient 中，定义了两个偏移量和两种颜色。
在 rect 元素中，在 fill 属性中，指定了渐变的 url，以使用之前创建的渐变填充矩形。

输出

在 Chrome 浏览器中打开 textSVG.htm。您可以使用 Chrome/Firefox/Opera 直接查看 SVG 图片，无需任何插件。Internet Explorer 9 及更高版本也支持 SVG 图片渲染。

打印页面