linearGradient

線状のグラデーションを定義する。fillやstrokeに色を指定する変わりにこの定義をしていすることで、グラデーションを表示する。

linearGradientでグラデーションの方向や属性を定義し、stopで使用する色及びその色の位置を定義する。

書き方

グラデーションの定義

<linearGradient gradientUnits="単位" x1="開始X座標" y1="開始Y座標" x2="終了X座標" y2="終了Y座標" spreadMethod="塗潰し方法" >

<stop offset="位置" stop-color="色" />

<stop offset="位置" stop-color="色" />

</linearGradient>

グラデーション定義の利用方法

linearGradientにidを指定しておき、そのidを利用先で指定する。

fill="url(グラデーション定義URL)"

stroke="url(グラデーション定義URL)"

gradientUnitspoints="単位"

グラデーションを描画する単位を指定する。省略時は、objectBoundingBoxとなる。

• userSpaceOnUse：描画する図形が存在するスペース全体を基準とする。
• objectBoundingBox：描画する図形を基準とする。

x1,y1,x2,y2

グラデーションの傾きを指定する。x1,y1は開始座標、x2,y2は終了座標を表し、単位内の比率で表す。

x1,y1,x2,y2でグラデーションの傾きと方向を指定する。省略時は、x1=0%,y1=0%,x2=100%,y2=0%（左から右へ水平に）である。

spreadMethod="塗潰し方法"

グラデーションを描画した残りの部分の塗潰し方法を指定する。省略時は、padとなる。

• pad：端に指定した色で塗潰す。
• reflect：指定した順番とは逆の順番でグラデーションを描画する。
• repeat：指定した順番と同じ順番でグラデーションを描画する。

offset="位置"

x1,y1,x2,y2で指定した直線上の相対位置を指定する。

stop-color="色"

offsetで指定した相対位置に表示する色を指定する。

使用例

x1,y1,x2,y2,stopの効果

gradientUnitsの効果(objectBoundingBox指定)

gradientUnitsの効果(userSpaceOnUse指定)

spreadMethodの効果(pad)

spreadMethodの効果(reflect)

spreadMethodの効果(repeat)

応用