SVGでパターンを使う方法
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>
<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>
<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>
<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日 | カテゴリー: デジタル | タグ: SVG , 和柄 ]
« Macの標準機能でOCRを使う方法 | RGBから最も近い色を探す「カラーネームを探すツール」 »
[…] You Look Too Cool2022.08.13SVGでパターンを使う方法https://stabucky.com/wp/archives/15145SV… 関連記事 […]