SVGのpattern要素の使いどころと使い方

<pattern>タグを使うと、SVG画像内で繰り返し使える任意のパターンを定義できる。パターンは、fill属性またはstroke属性で参照する。

使いどころ

例えば、ドット模様をSVGで表現することを考える。これは、<circle>タグを繰り返し使うことで簡単に実現できる。

<svg width="50" height="50" xmlns="http://www.w3.org/2000/svg">
  <circle cx="5" cy="5" r="2" fill="black" />
  <circle cx="15" cy="5" r="2" fill="black" />
  <circle cx="25" cy="5" r="2" fill="black" />
  <circle cx="35" cy="5" r="2" fill="black" />
  <circle cx="45" cy="5" r="2" fill="black" />

  <circle cx="5" cy="15" r="2" fill="black" />
  <circle cx="15" cy="15" r="2" fill="black" />
  <circle cx="25" cy="15" r="2" fill="black" />
  <circle cx="35" cy="15" r="2" fill="black" />
  <circle cx="45" cy="15" r="2" fill="black" />

  <circle cx="5" cy="25" r="2" fill="black" />
  <circle cx="15" cy="25" r="2" fill="black" />
  <circle cx="25" cy="25" r="2" fill="black" />
  <circle cx="35" cy="25" r="2" fill="black" />
  <circle cx="45" cy="25" r="2" fill="black" />

  <circle cx="5" cy="35" r="2" fill="black" />
  <circle cx="15" cy="35" r="2" fill="black" />
  <circle cx="25" cy="35" r="2" fill="black" />
  <circle cx="35" cy="35" r="2" fill="black" />
  <circle cx="45" cy="35" r="2" fill="black" />

  <circle cx="5" cy="45" r="2" fill="black" />
  <circle cx="15" cy="45" r="2" fill="black" />
  <circle cx="25" cy="45" r="2" fill="black" />
  <circle cx="35" cy="45" r="2" fill="black" />
  <circle cx="45" cy="45" r="2" fill="black" />
</svg>

ただ、これだとドットの数だけ<circle>タグが必要だ。違うのは座標だけであり、その座標にも決まったパターンがある。コピー&ペーストを繰り返すのは無駄が多い。

こんな時こそ、<pattern>タグの出番である。

使い方

<pattern>タグは、以下のような流れで使う。

<defs>タグの中に<pattern>タグを定義する。
定義したパターンを使いたい要素のstrokeあるいはfillで参照する。

<pattern>の定義、というとややこしそうだが、実際はシェイプ要素やパス要素で任意の画像を描くだけである。外から繰り返し参照できる<svg>タグ、のように捉えても良いかと思う。

指定できる属性

属性名	概要
viewBox	パターンのビューポートの境界を数値のリストで指定。デフォルトは`none`
x	パターンのX座標を長さか`%`で指定。デフォルトは`0`
width	パターンの幅を長さか`%`で指定。デフォルトは`0`
height	パターンの高さを長さか`%`で指定。デフォルトは`0`
href	既存のパターンを再利用したいときに、その`id`を指定。デフォルトは`none`
patternContentUnits	パターンの座標系を、`userSpaceOnUse`（SVG）か`objectBoundingBox`(シェイプ)のいずれかで指定。デフォルトは`userSpaceOnUse`。また、viewBoxを指定している場合、この属性は無効
patternTransform	パターンに何らかの変換処理（例`rotate(45)`）を指定したい場合に指定。デフォルトは`none`
patternUnits	`x`、`y`、`width`、`height`の値を適用する座標単位を、`userSpaceOnUse`（SVG）か`objectBoundingBox`(シェイプ)のいずれかで指定。デフォルトは`objectBoundingBox`。
preserveAspectRatio	パターンが定義と異なるアスペクト比の図形に使われた場合の処理を指定する。指定できる値は`none`、`xMinYMin`、`xMidYMin`、`xMaxYMin`、`xMinYMid`、`xMidYMid`、`xMaxYMid`、`xMinYMax`、`xMidYMax`、`xMaxYMax`のいずれか。また、これに`meet`（納める）、`slice`(切れてもいい)のいずれかを指定できる。デフォルト値は`xMidYMid meet`

ちなみに、先に示したドット模様は、<pattern>タグを使うと以下のように表現できる。

<svg width="50" height="50" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="dotPattern" width="10" height="10" patternUnits="userSpaceOnUse">
      <circle cx="5" cy="5" r="2" fill="black" />
    </pattern>
  </defs>

  <rect width="50" height="50" fill="url(#dotPattern)" />
</svg>

座標の計算がちょっとややこしいが、こちらの方がずっと見やすい。

使いどころ

使い方

指定できる属性

参考資料