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

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逆引きリファレンス一覧へ戻る