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

使いどころ

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

html
<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>タグは、以下のような流れで使う。

  1. <defs>タグの中に<pattern>タグを定義する。
  2. 定義したパターンを使いたい要素の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>タグを使うと以下のように表現できる。

html
<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>

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

参考資料