📌  相关文章
📜  SVG-渐变

📅  最后修改于: 2020-10-19 02:51:07             🧑  作者: Mango

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

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

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

线性渐变

宣言

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

属性

Sr.No. Name & Description
1 gradientUnits − units to define the coordinate system for the various length values within the gradient. If gradientUnits=”userSpaceOnUse”, values represent values in the current user coordinate system in place at the time when the gradient element is used. If patternContentUnits=”objectBoundingBox”, values represent values in fractions or percentages of the bounding box on the referencing element in place at the time when the gradient element is used. Default is userSpaceOnUse.
2 x1 − x-axis co-ordinate of the gradient vector. Defeault is 0.
3 y1 − y-axis co-ordinate of the gradient vector. Default is 0.
4 x2 − x-axis co-ordinate of the gradient vector. Defeault is 0.
5 y2 − y-axis co-ordinate of the gradient vector. Default is 0.
6 spreadMethod − indicates method of spreading the gradient within graphics element. Default is ‘pad’.
7 xlink:href − used to refer to another gradient.

例

testSVG.htm

SVG Linear Gradient
   
   
      
Sample SVG Linear Gradient

   
      
      
         
            
               
               
            
         
         
         
            Using Linear Gradient:

  • 一个元素定义为sampleGradient。

  • 在linearGradient中，用两种颜色定义了两个偏移量。

  • 在rect元素的fill属性中，指定渐变的url，以使用较早创建的渐变填充矩形。

输出

在Chrome网络浏览器中打开textSVG.htm。您可以使用Chrome / Firefox / Opera直接查看SVG图像，而无需任何插件。 Internet Explorer 9和更高版本还支持SVG图像呈现。

径向渐变

宣言

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

属性

Sr.No. Name & Description
1 gradientUnits − units to define the coordinate system for the various length values within the gradient. If gradientUnits=”userSpaceOnUse”, values represent values in the current user coordinate system in place at the time when the gradient element is used. If patternContentUnits=”objectBoundingBox”, values represent values in fractions or percentages of the bounding box on the referencing element in place at the time when the gradient element is used. Default is userSpaceOnUse.
2 cx − x-axis co-ordinate of the center of largest circle of gradient vector. Defeault is 0.
3 cy − y-axis co-ordinate of the center of largest circle of gradient vector. Default is 0.
4 r − radius of the center of largest circle of gradient vector. Defeault is 0.
5 fx − focal point of radial gradient. Default is 0.
6 fy − focal point of radial gradient. Default is 0.
7 spreadMethod − indicates method of spreading the gradient within graphics element. Default is ‘pad’.
8 xlink:href − used to refer to another gradient.

例

testSVG.htm

SVG Radial Gradient
   
      
      
Sample SVG Radial Gradient

      
      
         
            
               
               
            
         
         
         
            Using Radial Gradient:

  • 一个元素定义为sampleGradient。

  • 在radialGradient中，用两种颜色定义了两个偏移量。

  • 在rect元素的fill属性中，指定渐变的url，以使用较早创建的渐变填充矩形。

输出

在Chrome网络浏览器中打开textSVG.htm。您可以使用Chrome / Firefox / Opera直接查看SVG图像，而无需任何插件。 Internet Explorer 9和更高版本还支持SVG图像呈现。