パターン - tenkaiken ページ！

TENKAIKEN Docs

SVG／パターン

パターン配列定義 pattern 要素

属性

width, height

パターンの幅と高さ

パターンの名称

patternUnits

パターンの配置方法

userSpaceOnUse	隙間なく埋めるようにパターンを配置。
objectBoundingBox	%か0～1の割合で領域内を分割した間隔で配置（デフォルト）。

patternContentUnits

配置するパターンの座標単位

userSpaceOnUse	パターンの座標を描画先の座標単位で指定（デフォルト）。
objectBoundingBox	パターンの座標を描画先の領域内の比率を0～1で指定（%は不可）。

viewBox

パターンのグラフィックの座標系を定義
viewBoxとpatternContentUnitsが同時に指定された場合、viewBoxを優先しpatternContentUnitsを無視する。

領域内に水平・垂直方向に並べてタイル状に配置するグラフィックのパターンを定義します。
pattern要素の中にパターンとなるグラフィックを記述し、id属性にパターンの名前を設定します。これは描画されません。
width、height属性により、パターンを適用するX/Y方向それぞれのパターンの配置間隔を指定します。%で指定した場合は、パターンを適用する領域に対する間隔の比率になります。
パターンでグラフィックを塗りつぶすときのfill属性には、id属性に定義したパターン名を指定します。

fill="url(#パターンの名前)"

patternContentUnitsにobjectBoundingBoxを指定した場合は、描画先の領域のサイズに応じて、パターンの大きさが伸縮します。下の例の２つは同じパターンを指定していますが、下の方は横幅が長い領域に合わせてパターンも横に伸びています。
パターンの円の座標と半径は、0.1が指定されてますが、これは描画先領域の座標の10%を意味します。もしこれらを0.15とすると、各円が右下にずれて配置されます。

次の例は、viewBoxで指定したパターンの座標系に描画した円を、塗りつぶす領域の座標系の中に配置しています。四角の領域の20%×30%の範囲を40×60の座標系としてその中心に半径20の円を描画したことになります。

パターン自体を別のパターンで塗りつぶすことができます。