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 圖片渲染。

列印頁面