吉本集の個人ブログ
Web制作の技術について書いています。たまに日記も書きます。

【SVG】パターン要素(コンテナ要素)

2015年2月26日 / category : svg

パターン要素は、定義しておいたグラフィック要素を、表示するグラフィック要素のfillやstrokeに使用することができ、領域を覆うために一定の間隔で繰り返されます。


HTML
<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" version="1.1">
 <defs>
  <pattern id="pp" x="0" y="0" width="30" height="30" patternUnits="userSpaceOnUse">
   <rect x="0" y="0" width="15" height="15" fill="#7db960" />
   <rect x="0" y="15" width="15" height="15" fill="#b96071" />
   <rect x="15" y="15" width="15" height="15" fill="#7db960" />
   <rect x="15" y="0" width="15" height="15" fill="#b96071" />
  </pattern>
 </defs>
<rect width="300" height="300" fill="url(#pp)" />
</svg>

pattern要素内で定義されたグラフィック要素が、rect要素のfillで繰り返し塗られます。
pattern要素のwidth属性、height属性の値は、パターングラフィック要素のサイズと同じ値にしているため、敷き詰められた状態で塗られています。
パターングラフィック要素のサイズより値を大きくした場合は、次のようになります。


HTML
<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" version="1.1">
 <defs>
  <pattern id="ppp" x="0" y="0" width="45" height="45" patternUnits="userSpaceOnUse">
   <rect x="0" y="0" width="15" height="15" fill="#7db960" />
   <rect x="0" y="15" width="15" height="15" fill="#b96071" />
   <rect x="15" y="15" width="15" height="15" fill="#7db960" />
   <rect x="15" y="0" width="15" height="15" fill="#b96071" />
  </pattern>
 </defs>
<rect width="300" height="300" fill="url(#ppp)" />
</svg>

pattern要素内で定義されたグラフィック要素のサイズは、30px × 30pxですが、pattern要素で指定している横幅と高さは45px × 45pxです。そのため、塗りの繰り返しで15px × 15pxの空きができました。

次はstrokeに対して、pattern要素を使用してみます。

HTML
<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" version="1.1">
 <defs>
  <pattern id="p1" x="0" y="0" width="30" height="30" patternUnits="userSpaceOnUse">
    <rect x="0" y="0" width="15" height="15" fill="#7db960" />
    <rect x="0" y="15" width="15" height="15" fill="#b96071" />
    <rect x="15" y="15" width="15" height="15" fill="#7db960" />
    <rect x="15" y="0" width="15" height="15" fill="#b96071" />
   </pattern>
  </defs>
 <line x1="0" y1="150" x2="300" y2="150" stroke="url(#p1)" stroke-width="60" />
</svg>

次に、pattern要素の属性ですが、以前の記事でも書いたmask要素のmaskUnits属性や、marker要素のmarkerUnits属性と同様に、pattern要素にはpatternUnits属性があります。また、mask要素のmaskContentUnits属性と同様のpatternContentUnits属性があります。
これらの属性に関しては、簡単に書いちゃいます。

patternUnits属性 / patternContentUnits属性

“userSpaceOnUse”
HTML
<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" version="1.1">
 <defs>
  <pattern id="p2" x="0" y="0" width="30" height="30"
  patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse">
   <rect x="0" y="0" width="15" height="15" fill="#7db960" />
   <rect x="0" y="15" width="15" height="15" fill="#b96071" />
   <rect x="15" y="15" width="15" height="15" fill="#7db960" />
   <rect x="15" y="0" width="15" height="15" fill="#b96071" />
  </pattern>
 </defs>
 <rect width="300" height="300" fill="url(#p2) />
</svg>
“objectBoundingBox”
HTML
<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" version="1.1">
 <defs>
  <pattern id="p3" x="0" y="0" width="0.1" height="0.1"
  patternUnits="objectBoundingBox" patternContentUnits="objectBoundingBox">
   <rect x="0" y="0" width="0.05" height="0.05" fill="#7db960" />
   <rect x="0" y="0.05" width="0.05" height="0.05" fill="#b96071" />
   <rect x="0.05" y="0.05" width="0.05" height="0.05" fill="#7db960" />
   <rect x="0.05" y="0" width="0.05" height="0.05" fill="#b96071" />
  </pattern>
 </defs>
 <rect width="300" height="300" fill="url(#p3)" />
</svg>

pattern要素にはもうひとつ、patternTransformという属性があります。
これは、pattern要素のグラフィック要素に対し、回転や拡大・縮小などのプロパティを変更することができる属性です。
patternTransform属性は、transform属性と同様の属性ですので、この属性に関しては、簡単に触れておきます。
今後の記事で、transform属性について詳しく書きたいと思います。

patternTransform属性

HTML
<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" version="1.1">
 <defs>
  <pattern id="p4" x="0" y="0" width="30" height="30"
  patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse" patternTransform="rotate(45)">
   <rect x="0" y="0" width="15" height="15" fill="#7db960" />
   <rect x="0" y="15" width="15" height="15" fill="#b96071" />
   <rect x="15" y="15" width="15" height="15" fill="#7db960" />
   <rect x="15" y="0" width="15" height="15" fill="#b96071" />
  </pattern>
 </defs>
 <rect width="300" height="300" fill="url(#p4)" />
</svg>