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 - 指示在图形元素内传播渐变的方法。默认为“垫”。
7 xlink:href - 用于引用另一个渐变。

例子

测试SVG.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 Web 浏览器中打开 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 - 指示在图形元素内传播渐变的方法。默认为“垫”。
8 xlink:href - 用于引用另一个渐变。

例子

测试SVG.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 Web 浏览器中打开 textSVG.htm。您可以使用Chrome/Firefox/Opera直接查看SVG图像，无需任何插件。Internet Explorer 9 及更高版本还支持 SVG 图像渲染。