svg <pattern> 要素

SVGは<pattern>要素を使用してパターンを定義できます。これは図形要素にタイルで塗りつぶすために使用されます。

預定義の図形を使用してオブジェクトに塗りつぶしまたは縁取りを行うには、pattern要素を使用する必要があります。pattern要素は、預定義の図形をx軸とy軸上に固定間隔で繰り返し（またはタイル）して塗りつぶす区域を覆うことができます。まずpattern要素を使用してパターンを定義し、指定された図形要素上で属性fillまたは属性strokeを使用して塗りつぶしまたは縁取りに使用されるパターンを参照します。

<svg　width="120"　height="120"　viewBox="0　0　120　120"　　　　
xmlns="http://www.w3.org/2000/svg"　version="1.1"　　　　
xmlns:xlink="http://www.w3.org/1999/xlink">　　　　
<defs>　　　　
<pattern　id="Triangle"　width="10"　height="10"　patternUnits="userSpaceOnUse">　　　　
<polygon　points="5,0　10,10　0,10"/>　　　　
　　　　</pattern>　　　　
</defs>　　　　
<circle　cx="60"　cy="60"　r="50"　　fill="url(#Triangle)"/>　　　　
</svg>

実行結果は以下の通りです:

使い方説明

• <pattern>のid属性はパターンのユニークな名前を定義します。

• patternUnitsはx、y、幅、高さ属性を定義するために使用されます。

• cxおよびcyはパターンの境界ボックスのxおよびy座標です。