トップページ >  HTML5 >  svg要素(3)　グラデーション
初版2011/08/06： 最終更新日2011/08/06
svg要素(3)　グラデーション
目次
・グラデーションを指定する
・線形グラデーション
・放射型グラデーション
・背景パターンを指定する
グラデーションを指定する

<svg>要素には、グラデーション要素を定義することで、図形にグラデーションを指定することが出来ます。
グラデーションの種類は、後述の「線形グラデーション」と「円形グラデーション」の2種です。
グラデーションは、「fill属性」や「stroke属性」にて利用することが出来ます。

リスト1. グラデーションの指定

<defs>
	<!-- 線形グラデーションを定義 -->
	<linearGradient id="MyGradient">
		<stop offset="5%" stop-color="#F60" />
		<stop offset="95%" stop-color="#FF6" />
	</linearGradient>
</defs>
<!-- 線色にグラデーション -->
<circle cx="150" cy="100" r="80" stroke="url(#MyGradient)" fill="green" />
<!-- グラデーション無し -->
<circle cx="250" cy="100" r="80" stroke="#00ff00" fill="#0000ff" />
<!-- 塗りつぶしにグラデーション -->
<circle cx="350" cy="100" r="80" stroke="rgb(00,00,255)" fill="url(#MyGradient)" />

コーディング例

線形グラデーション

線形グラデーションとは、直線方向にグラデーションをかけるものです。
よくドーム状のボタンイメージに使われるグラデーションです。

リスト2. 線形グラデーション

<defs>
	<!-- 線形グラデーションを定義 座標(x1,y1)から(x2,y2)に向かって -->
	<linearGradient id="MyGradient2" x1="0" y1="0" x2="0" y2="100%">
		<!-- 5%,50%,95% での色を定義 -->
		<stop offset="5%" stop-color="#F60" />
		<stop offset="50%" stop-color="#FF6" />
		<stop offset="95%" stop-color="#F60" />
	</linearGradient>
</defs>
<!-- 塗りつぶしにグラデーション -->
<rect x="150" y="50" width="200" height="100" stroke="#F60" fill="url(#MyGradient2)" />

コーディング例

放射型グラデーション

放射型グラデーションとは、同心円状にグラデーションをかけるものです。
よく光源イメージに使われるグラデーションです。

リスト3. 放射型グラデーション

<defs>
	<!-- 放射型グラデーション 中心座標(cx,cy) 半径r 焦点座標(fx,fy) -->
	<radialGradient id="MyGradient3" gradientUnits="userSpaceOnUse"
					cx="250" cy="100" r="100" fx="250" fy="100">
		<!-- 0%,50%,100% での色を定義 -->
		<stop offset="0%" stop-color="red" />
		<stop offset="50%" stop-color="blue" />
		<stop offset="100%" stop-color="red" />
	</radialGradient>
</defs>
<!-- 塗りつぶしにグラデーション -->
<rect x="150" y="50" width="200" height="100" stroke="#F60" fill="url(#MyGradient3)" />

コーディング例

背景パターンを指定する

グラデーションではありませんが、似たような使用方法として背景パターンを指定することが出来ます。
背景パターンには、SVGで定義出来るものは全て背景ソースとして用いることができます。

リスト4. 背景パターン

<defs>
	<!-- パターンの定義 100x100の領域を定義して、そこにパターンを作る -->
	<pattern id="MyPattern" patternUnits="userSpaceOnUse"
			 x="0" y="0" width="100" height="100"
			 viewBox="0 0 10 10" >
		<!-- パターンに円を定義 -->
		<circle cx="5" cy="0" r="4" stroke="green" fill="red" stroke-width="0.5" />
	</pattern>
</defs>
<!-- 塗りつぶしにパターン -->
<rect x="50" y="25" width="300" height="150" stroke="#F60" fill="url(#MyPattern)" />

コーディング例

HOME