SVGを画像パターンで塗りつぶす

defsを使うとSVGのfill(塗りつぶし)にパターンも定義できます。

See the Pen SVG in pattern by webdev (@webdev-jp-net) on CodePen.0

パターンのタイル1個分のSVG

リピートさせてパターンとする、素の図案のSVGを用意します。
8×8のドットです。

<br />
&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 8 8&quot;&gt;<br />
	&lt;circle fill=&quot;black&quot; cx=&quot;1.5&quot; cy=&quot;1.5&quot; r=&quot;1&quot;/&gt;<br />
	&lt;circle fill=&quot;black&quot; cx=&quot;5.5&quot; cy=&quot;5.5&quot; r=&quot;1&quot;/&gt;<br />
&lt;/svg&gt;<br />

塗りつぶしたい範囲のSVG

塗りつぶしたい範囲のSVGを用意します。
400×400の矩形です。

<br />
&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 400 400&quot;&gt;<br />
	&lt;rect width=&quot;400&quot; height=&quot;400&quot; fill=&quot;black&quot; x=&quot;0&quot; y=&quot;0&quot; /&gt;<br />
&lt;/svg&gt;<br />

タイル1個ぶんのSVGをdefsでパターン定義

塗りつぶしたい範囲のSVGにdefsタグを追加して、タイル1個ぶんのSVGをpatternとして定義します。
※この時点では見た目に変化なし

このとき、patternwidthheight
タイルサイズを塗りつぶし範囲で割った数値にしておきます。

この例だとこうなります

8(タイルのサイズ) ÷ 400(塗りつぶし範囲のサイズ) = 0.02

<br />
&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 400 400&quot;&gt;<br />
	&lt;defs&gt;<br />
		&lt;pattern x=&quot;0&quot; y=&quot;0&quot; width=&quot;.02&quot; height=&quot;.02&quot;&gt;<br />
			&lt;circle fill=&quot;black&quot; cx=&quot;1.5&quot; cy=&quot;1.5&quot; r=&quot;1&quot;/&gt;<br />
			&lt;circle fill=&quot;black&quot; cx=&quot;5.5&quot; cy=&quot;5.5&quot; r=&quot;1&quot;/&gt;<br />
		&lt;/pattern&gt;<br />
	&lt;/defs&gt;<br />
	&lt;rect width=&quot;400&quot; height=&quot;400&quot; fill=&quot;black&quot; x=&quot;0&quot; y=&quot;0&quot; /&gt;<br />
&lt;/svg&gt;<br />

fill(塗りつぶし)としてpatternを紐づける

patternidを付与して、塗りつぶし範囲のrect(矩形)のfill(塗りつぶし)として定義します。

紐付けはurl(#id名)という書式になります。

<br />
&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 400 400&quot;&gt;<br />
	&lt;defs&gt;<br />
		&lt;pattern id=&quot;dot&quot; x=&quot;0&quot; y=&quot;0&quot; width=&quot;.02&quot; height=&quot;.02&quot;&gt;<br />
			&lt;circle fill=&quot;black&quot; cx=&quot;1.5&quot; cy=&quot;1.5&quot; r=&quot;1&quot;/&gt;<br />
			&lt;circle fill=&quot;black&quot; cx=&quot;5.5&quot; cy=&quot;5.5&quot; r=&quot;1&quot;/&gt;<br />
		&lt;/pattern&gt;<br />
	&lt;/defs&gt;<br />
	&lt;rect width=&quot;400&quot; height=&quot;400&quot; fill=&quot;url(#dot)&quot; x=&quot;0&quot; y=&quot;0&quot; /&gt;<br />
&lt;/svg&gt;<br />

関連記事