図形にパターン背景を付ける

SVGで図形にパターン背景を付けるには、pattern要素を使用します。

構文

<pattern>
	パターン背景にする図形
</pattern>

属性

属性名 初期値 説明
x 0% パターンを開始するX座標(位置)。
y 0% パターンを開始するY座標(位置)。
width 1 パターンの幅。
patternUnits属性の値によって指定単位が異なる。
height 1 パターンの高さ。
patternUnits属性の値によって指定単位が異なる。
patternUnits objectBoundingBox width属性とheight属性の指定方法。
userSpaceOnUse ... width属性とheight属性をピクセル単位で適用
objectBoundingBox ... 適用した図形の幅と高さを元にwidth属性とheight属性をその割合で適用
patternContentUnits userSpaceOnUse ※ 不明

patternUnits属性のobjectBoundingBoxについて

patternUnits属性のobjectBoundingBoxについてもう少し詳しく説明すると、例えば適用する図形のwidth属性の値が"100"である場合、パターンの分割数を5つとした場合、pattern要素のwidth属性の値は"0.2"と指定します。
pattern要素の幅は100 ÷ 2 = 20ピクセルとなります。
この時pattern要素内で図形を準備する時はpattern要素の幅が20ピクセルですので、その範囲で描画することになります。
次の図ではこれらの数値に加え、10ピクセルの円形図形をパターンにした場合の図です。

サンプルコードとデモ

XML

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" width="200" height="100">
	<defs>
		<pattern width="20" height="20" patternUnits="userSpaceOnUse" id="sample">
			<circle cx="5" cy="5" r="5" />
		</pattern>
	</defs>

	<rect width="200" height="100" fill="url(#sample)" />
</svg>

XML

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" width="200" height="100">
<defs>
	<defs>
		<linearGradient id="sample-lg">
			<stop offset="0%" stop-color="red" />
			<stop offset="100%" stop-color="blue" />
		</linearGradient>
	</defs>
	<pattern width="40" height="40" patternUnits="userSpaceOnUse" id="sample">
		<circle cx="10" cy="10" r="10" fill="url(#sample-lg)" />
	</pattern>
</defs>

<rect width="200" height="100" fill="url(#sample)" />
</svg>

XML

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" width="200" height="100">
	<defs>
		<pattern width="10" height="10" patternUnits="userSpaceOnUse" id="sample">
			<circle cx="5" cy="5" r="5" />
		</pattern>
	</defs>

	<rect x="5" y="5" width="190" height="90"  fill="none" stroke="url(#sample)" stroke-width="10" />
</svg>

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