SVGでパターンを使う方法

Pocket

SVGには描いた画像を縦横に並べる機能があります。
これを使うと模様が簡単に描けます。

基本

svgの定義をします。

defsでパターンを定義します。

patternでパターンの設定をします。
idを適当に決めておきます。
patternUnitsは呪文です。
scaleは縮尺です。
rotateは回転です。角度を指定します。45にすると斜めになった模様が描けます。
skewXとSkewYは歪みです。角度を指定します。
patternの中にパターンを描画します。

rectで実際に繰り返しを描きます。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" viewBox="0 0 400 400" width="400" height="400">
<defs>
  <pattern id="my_pattern" width="50" height="50" patternUnits="userSpaceOnUse" patternTransform="translate(0 0) scale(1) rotate(0) skewX(0) skewY(0)">
    <rect x="20" y="20" width="25" height="25" fill="pink" stroke="red" stroke-width="5" />
    <circle cx="20" cy="20" r="15" fill="lightblue" stroke="blue" stroke-width="5" />
  </pattern>
</defs>
<rect width="400" height="400" fill="url(#my_pattern)"></rect>
</svg>

実例

市松

(svgの定義は省略します。)
緑と黒の4個の正方形を描いてそれを繰り返します。

<defs>
  <pattern id="my_pattern" width="40" height="40" patternUnits="userSpaceOnUse" patternTransform="translate(0 0) scale(1) rotate(0) skewX(0) skewY(0)">
      <rect x="0" y="0" width="20" height="20" fill="green" />
      <rect x="20" y="0" width="20" height="20" fill="black" />
      <rect x="0" y="20" width="20" height="20" fill="black" />
      <rect x="20" y="20" width="20" height="20" fill="green" />
  </pattern>
</defs>
<rect width="400" height="400" fill="url(#my_pattern)"></rect>

麻の葉

一つのパターンを描き、縮尺を変えて45度回転しています。

<defs>
  <pattern id="my_pattern" width="60" height="60" patternUnits="userSpaceOnUse" patternTransform="translate(0 0) scale(1 0.667) rotate(45) skewX(0) skewY(0)">
    <rect width="60" height="60" fill="pink" />

    <line x1="0" y1="0" x2="0" y2="60" stroke="black" stroke-width="2" />
    <line x1="0" y1="0" x2="60" y2="0" stroke="black" stroke-width="2" />
    <line x1="0" y1="0" x2="60" y2="60" stroke="black" stroke-width="1" />

    <line x1="0" y1="0" x2="20" y2="40" stroke="black" stroke-width="1" />
    <line x1="0" y1="60" x2="20" y2="40" stroke="black" stroke-width="1" />
    <line x1="60" y1="60" x2="20" y2="40" stroke="black" stroke-width="1" />

    <line x1="0" y1="0" x2="40" y2="20" stroke="black" stroke-width="1" />
    <line x1="60" y1="0" x2="40" y2="20" stroke="black" stroke-width="1" />
    <line x1="60" y1="60" x2="40" y2="20" stroke="black" stroke-width="1" />
  </pattern>
</defs>
<rect width="400" height="400" fill="url(#my_pattern)"></rect>

[ 2022年8月13日 | カテゴリー: デジタル | タグ: , ]

« | »

コメントを残す

メールアドレスが公開されることはありません。

送信してください。


タグ

カテゴリー

最近の投稿

最近のコメント

固定ページ

アーカイブ

stabucky

写真

メタ情報