radialGradient

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

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

書き方

グラデーションの定義

<radialGradient gradientUnits="単位" cx="終点円中心X座標" cy="終点円中心Y座標" r="終点円半径" fx="開始X座標" fy="開始Y座標" spreadMethod="塗潰し方法" >

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

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

</radialGradient>

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

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

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

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

gradientUnits="単位"

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

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

cx,cy,r

グラデーションを終了する円の中心座標と半径を指定する。

gradientUnits="objectBoundingBox"の場合、対象図形の内の相対値（％）を指定する。

fx,fy

グラデーションを開始する中心座標を指定する。

gradientUnits="objectBoundingBox"の場合、対象図形の内の相対値（％）を指定する。

spreadMethod="塗潰し方法"

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

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

offset="位置"

fx,fyで指定した座標から、cx,cy,rで指定した円周までの相対位置を指定する。

stop-color="色"

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

使用例

cx,cy,r,fx,fyの効果

<defs>
<radialGradient id="Gradient1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%" gradientUnits="objectBoundingBox" spreadMethod="pad">
<stop offset="0%" stop-color="red" />
<stop offset="100%" stop-color="blue" />
</radialGradient>
<radialGradient id="Gradient2" cx="10%" cy="50%" r="50%" fx="50%" fy="50%" gradientUnits="objectBoundingBox" spreadMethod="pad">
<stop offset="0%" stop-color="red" />
<stop offset="100%" stop-color="blue" />
</radialGradient>
<radialGradient id="Gradient3" cx="50%" cy="50%" r="50%" fx="10%" fy="50%" gradientUnits="objectBoundingBox" spreadMethod="pad">
<stop offset="0%" stop-color="red" />
<stop offset="100%" stop-color="blue" />
</radialGradient>
<radialGradient id="Gradient4" cx="50%" cy="50%" r="20%" fx="50%" fy="50%" gradientUnits="objectBoundingBox" spreadMethod="pad">
<stop offset="0%" stop-color="red" />
<stop offset="100%" stop-color="blue" />
</radialGradient>
</defs>

<rect fill="url(#Gradient1)" stroke="black" stroke-width="5" x="5" y="5" width="190" height="90"/>
<rect fill="url(#Gradient2)" stroke="black" stroke-width="5" x="5" y="105" width="190" height="90"/>
<rect fill="url(#Gradient3)" stroke="black" stroke-width="5" x="5" y="205" width="190" height="90"/>
<rect fill="url(#Gradient4)" stroke="black" stroke-width="5" x="5" y="305" width="190" height="90"/>

gradientUnitsの効果(userSpaceOnUse指定)

<defs>
<radialGradient id="Gradient1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%" gradientUnits="userSpaceOnUse" spreadMethod="pad">
<stop offset="0%" stop-color="red" />
<stop offset="100%" stop-color="blue" />
</radialGradient>
</defs>

<rect fill="url(#Gradient1)" stroke="black" stroke-width="5" x="5" y="5" width="190" height="90"/>
<rect fill="url(#Gradient1)" stroke="black" stroke-width="5" x="5" y="105" width="190" height="90"/>
<rect fill="url(#Gradient1)" stroke="black" stroke-width="5" x="5" y="205" width="190" height="90"/>
<rect fill="url(#Gradient1)" stroke="black" stroke-width="5" x="5" y="305" width="190" height="90"/>

spreadMethodの効果(pad)

<defs>
<radialGradient id="Gradient1" cx="50%" cy="50%" r="20%" fx="50%" fy="50%" gradientUnits="userSpaceOnUse" spreadMethod="pad">
<stop offset="0%" stop-color="red" />
<stop offset="100%" stop-color="blue" />
</radialGradient>
</defs>

<rect fill="url(#Gradient1)" stroke="black" stroke-width="5" x="5" y="5" width="190" height="90"/>
<rect fill="url(#Gradient1)" stroke="black" stroke-width="5" x="5" y="105" width="190" height="90"/>

spreadMethodの効果(reflect)

<defs>
<radialGradient id="Gradient1" cx="50%" cy="50%" r="20%" fx="50%" fy="50%" gradientUnits="userSpaceOnUse" spreadMethod="reflect">
<stop offset="0%" stop-color="red" />
<stop offset="100%" stop-color="blue" />
</radialGradient>
</defs>

<rect fill="url(#Gradient1)" stroke="black" stroke-width="5" x="5" y="5" width="190" height="90"/>
<rect fill="url(#Gradient1)" stroke="black" stroke-width="5" x="5" y="105" width="190" height="90"/>

spreadMethodの効果(repeat)

<defs>
<radialGradient id="Gradient1" cx="50%" cy="50%" r="20%" fx="50%" fy="50%" gradientUnits="userSpaceOnUse" spreadMethod="repeat">
<stop offset="0%" stop-color="red" />
<stop offset="100%" stop-color="blue" />
</radialGradient>
</defs>

<rect fill="url(#Gradient1)" stroke="black" stroke-width="5" x="5" y="5" width="190" height="90"/>
<rect fill="url(#Gradient1)" stroke="black" stroke-width="5" x="5" y="105" width="190" height="90"/>

応用

<defs>
<radialGradient id="Gradient1" cx="50%" cy="50%" r="20%" fx="50%" fy="50%" gradientUnits="userSpaceOnUse" spreadMethod="repeat">
<stop offset="0%" stop-color="orange" />
<stop offset="100%" stop-color="green" />
</radialGradient>
<radialGradient id="Gradient2" cx="50%" cy="50%" r="20%" fx="50%" fy="50%" gradientUnits="userSpaceOnUse" spreadMethod="reflect">
<stop offset="0%" stop-color="red" />
<stop offset="100%" stop-color="blue" />
</radialGradient>
</defs>

<rect fill="url(#Gradient2)" stroke="url(#Gradient1)" stroke-width="8" x="5" y="5" width="90" height="90"/>
<rect fill="url(#Gradient1)" stroke="url(#Gradient2)" stroke-width="8" x="105" y="5" width="90" height="90"/>
<rect fill="url(#Gradient1)" stroke="url(#Gradient2)" stroke-width="8" x="5" y="105" width="90" height="90"/>
<rect fill="url(#Gradient2)" stroke="url(#Gradient1)" stroke-width="8" x="105" y="105" width="90" height="90"/>

関連ページ：SVG hand book 目次