「SVGによる和柄」

SVGで和柄を描いてみたところ、結構簡単にできたのですが、使いみちが特になく、将来何かに使うかもしれないので備忘録的に残しておきます。

和柄は一つのパターンの繰り返しが多いです。
SVGにはパターンを上下左右に繰り返す手法があるのでこれを使うと簡単に描けます。
SVGで示すと下のとおりです。
defsが定義という意味だと思います。
ここにpatternを置いてこの中にパターンとして模様を一つ描きます。idを付けます。
その後、rect(長方形)でidの付いたパターンを呼び出します。

他の言語だと繰り返し処理のコードを書く必要がありますが、SVGならば不要です。
開発環境も特に必要ありません。エディタとブラウザだけで足ります。

<svg>
<defs>
<pattern id="my_pattern">
模様を描く
</pattern>
</defs>
<rect fill="url(#my_pattern)"></rect>
</svg>

パターンを使う方法については下のリンク先にあります。

コメント

タイトルとURLをコピーしました