SVG-グラデーション

グラデーションとは、シェイプ内のある色から別の色へのスムーズな移行を指します。 SVGは2種類のグラデーションを提供します。

線形グラデーション-ある方向から別の方向へのある色から別の色への線形遷移を表します。
放射状グラデーション-ある方向から別の方向へのある色から別の色への円形の遷移を表します。

線形勾配

宣言

以下は、 <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>

属性

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.

例

テストVG

<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として定義された1つの<linearGradient>要素。
linearGradientでは、2つのオフセットが2色で定義されます。
rect要素、fill属性では、グラデーションのurlが指定され、以前に作成されたグラデーションで四角形を塗りつぶします。

出力

ChromeウェブブラウザでテキストSVGを開きます。 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>

属性

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.

例

テストVG

<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として定義された1つの<radialGradient>要素。
radialGradientでは、2つのオフセットが2色で定義されます。
rect要素、fill属性では、グラデーションのurlが指定され、以前に作成されたグラデーションで四角形を塗りつぶします。

出力

ChromeウェブブラウザでテキストSVGを開きます。 Chrome/Firefox/Operaを使用して、プラグインなしでSVG画像を直接表示できます。 Internet Explorer 9以降もSVG画像レンダリングをサポートしています。

Svg-gradients

目次

SVG-グラデーション

線形勾配

宣言

属性

例

出力

放射状グラデーション

宣言

属性

例

出力