<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`	用來定義梯度內(nèi)各種長度值的坐標(biāo)系的單位。如果`gradientUnits =“userSpaceOnUse”`，則值表示使用漸變元素時(shí)當(dāng)前用戶坐標(biāo)系中的值。如果`patternContentUnits =“objectBoundingBox”`，則值表示在使用漸變元素時(shí)就地引用元素上的邊界框的分?jǐn)?shù)或百分比值。默認(rèn)是`userSpaceOnUse`。
2	`x1`	梯度向量的`x`軸坐標(biāo)，缺省值是`0`。
3	`y2`	梯度向量的`y`軸坐標(biāo)，缺省值是`0`。
4	`x2`	梯度向量的`x`軸坐標(biāo)。缺省值是`0`。
5	`y2`	`y`軸坐標(biāo)的梯度向量。缺省值是`0`。
6	`spreadMethod`	指示在圖形元素內(nèi)散布漸變的方法。默認(rèn)是`'pad'`。
7	`xlink:href`	用于指另一個(gè)漸變。

示例

文件:testSVG.html -

<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>

以下是對上面代碼的一些解釋 -

定義為sampleGradient的一個(gè)<linearGradient>元素。
在linearGradient中，兩個(gè)偏移量用兩種顏色定義。
在rect元素中，在填充屬性中，指定漸變的URL以使用之前創(chuàng)建的漸變填充矩形。

在Chrome瀏覽器中打開文件:testSVG.html，得到以下結(jié)果 -

徑向漸變

以下是<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`	用來定義梯度內(nèi)各種長度值的坐標(biāo)系的單位。如果`gradientUnits =“userSpaceOnUse”`，則值表示使用漸變元素時(shí)當(dāng)前用戶坐標(biāo)系中的值。如果patternContentUnits =“objectBoundingBox”，則值表示在使用漸變元素時(shí)就地引用元素上的邊界框的分?jǐn)?shù)或百分比值。默認(rèn)是userSpaceOnUse。
2	`cx`	最大圓梯度矢量中心的`x`軸坐標(biāo)。缺省值是`0`。
3	`cy`	最大的圓梯度矢量中心的`y`軸坐標(biāo)。缺省值是`0`。
4	`r`	梯度矢量最大圓的中心的半徑。缺省值是0。
5	`fx`	徑向漸變的焦點(diǎn)，缺省值是`0`。
6	`fy`	徑向漸變的焦點(diǎn)。缺省值是`0`。
7	`spreadMethod`	指示在圖形元素內(nèi)散布漸變的方法。默認(rèn)是`'pad'`。
8	`xlink:href`	用于指另一個(gè)漸變。

示例

文件:testSVG.html -

<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>

定義為sampleGradient的一個(gè)<radialGradient>元素。
在radialGradient中，兩個(gè)偏移量用兩種顏色定義。
在rect元素中，在填充屬性中，指定漸變的URL以使用之前創(chuàng)建的漸變填充矩形。

在Chrome瀏覽器中打開文件:textSVG.html -