図形に放射状(円形)のグラデーションを付ける

SVGで図形に放射状(円形)のグラデーションを付けるには、グラデーションの定義をradialGradient要素、色を指定する時はstop要素を使用します。

radialGradient要素は定義するのみで図形へ適用する場合は、radialGradient要素にid属性を付与し、図形の色の付けたい属性値にurl関数を使用して、radialGradient要素に指定したid属性の値をハッシュ付きで指定することでグラデーションを図形へ適用することができます。
具体的なソースコードについては本文の下部にある サンプルコードとデモをご覧ください。

radialGradient要素による定義はdefs要素の中で行います。
defs要素については、再利用するための定義ページをご覧ください。

構文

<radialGradient>
	<stop />
	...
</radialGradient>

属性:radialGradient要素

属性名 初期値 説明
cx 50% グラデーションの描画を開始する中心となるX軸座標(位置)。
cy 50% グラデーションの描画を開始する中心となるY軸座標(位置)。
r 50% グラデーションを広げる半径。
cx属性、cy属性の中心座標からの半径。
半径はX軸とY軸の両方に適用される(それぞれ個別には指定できない)。
fx cx属性値 グラデーションの焦点となるX軸座標(位置)。
cx属性とcy属性からr属性のグラデーションをかける範囲で、グラデーションを開始するX軸の座標を指定する。
fy cy属性値 グラデーションの焦点となるY軸座標(位置)。
cx属性とcy属性からr属性のグラデーションをかける範囲で、グラデーションを開始するY軸の座標を指定する。
gradientUnits objectBoundingBox cr属性とcy属性からr属性グラデーションをかける範囲で基準とするグラデーションの対象。
指定可能な値は次の通り。
userSpaceOnUse ... グラデーションをSVG要素全体の描画領域内でcx属性、cy属性、r属性を図形要素に適用

objectBoundingBox ... グラデーションを図形要素内でcx属性、cy属性、r属性を図形要素に適用
spreadMethod pad グラデーションの塗り方。
指定可能な値は次の通り。
pad cx/cy属性からr属性の範囲を塗り潰す
reflect cx/cy属性からr属性を折り返して(往復して)さらに繰り返す
repeat cx/cy属性からr属性を繰り返す
xlink:href 継承する対象のグラデーション要素のid属性値。
ハッシュフラグメントとして指定する。
SVG 1.1の場合はこの属性を使用し、SVG 2からは非推奨となるのでhref属性を使用する。
href 継承する対象のグラデーション要素のid属性値。
ハッシュフラグメントとして指定する。
SVG 2からはこの属性を使用し、SVG 1.1まではxlink:href属性を使用する。

属性:stop要素

属性名 初期値 説明
offset x1/y1属性からx2/y2属性の間の色の位置の割合。
0%から100%または0から1の間で指定する。
offset="10%"
offset="0.75"
stop-color black 利用する色。 stop-color="#f00"
stop-opacity 1 stop-color属性の不透明度。
0から1の間で指定。
例えば不透明度75%なら0.75、不透明度12.5%なら0.125と指定する。
stop-opacity="0.25"

サンプルコードとデモ

XML

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200">
	<defs>
		<radialGradient id="sample">
			<stop offset="0%" stop-color="#f00" />
			<stop offset="50%" stop-color="#0f0" />
			<stop offset="100%" stop-color="#00f" />
		</radialGradient>
	</defs>
	<rect width="200" height="200" fill="url(#sample)" />
</svg>

XML

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200">
	<defs>
		<radialGradient cx="70%" cy="30%" r="100%" id="sample">
			<stop offset="20%" stop-color="#f00" />
			<stop offset="70%" stop-color="#00f" />
		</radialGradient>
	</defs>
	<rect width="200" height="200" fill="url(#sample)" />
</svg>

XML

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200">
	<defs>
		<radialGradient id="sample">
			<stop offset="50%" stop-color="#f00" />
			<stop offset="50%" stop-color="#00f" />
		</radialGradient>
	</defs>
	<rect width="200" height="200" fill="url(#sample)" />
</svg>

XML

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200">
	<defs>
		<radialGradient fx="20%" fy="70%" id="sample">
			<stop offset="0%" stop-color="#f00" />
			<stop offset="100%" stop-color="#00f" />
		</radialGradient>
	</defs>
	<rect width="200" height="200" fill="url(#sample)" />
</svg>

XML

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200">
	<defs>
		<radialGradient gradientUnits="userSpaceOnUse" id="sample">
			<stop offset="0%" stop-color="#f00" />
			<stop offset="100%" stop-color="#00f" />
		</radialGradient>
	</defs>
	<rect width="100" height="100" x="100" fill="url(#sample)" />
</svg>

XML

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200">
	<defs>
		<radialGradient spreadMethod="repeat" r="20%" id="sample">
			<stop offset="0%" stop-color="#f00" />
			<stop offset="100%" stop-color="#00f" />
		</radialGradient>
	</defs>
	<rect width="200" height="200" fill="url(#sample)" />
</svg>

SVG逆引きリファレンス一覧へ戻る