SVG でパターンを作る際の未定義なふるまい

はじめに

SVG でパターンを定義する際に一つ気になる点があったので、その覚書です。

点対称型モチーフを作ってみます

まず適当な図形を作ります。

use でそのクローンを作成して、180度回転させます。

<use xlink:href='#path' transform='rotate(180)' />
こうしてできたものを点対称モチーフと(勝手に)呼んでいます。

問題点

先ほど作成したモチーフをパターンに定義(赤枠の領域)して、それで塗りつぶした矩形を作ってみます。

<pattern id='pattern' ...>
    <use xlink:href='#motif' />
</pattern>
...
<rect fill='url(#pattern)' ... />

赤枠からはみ出た部分は表示されません。

この辺りに overflow:hidden がデフォルトで設定されているのでこうなるのだと記述があります。


デベロッパーツールで確認すると確かに設定されています。

overflow を上書きするまで領域の外側は切り取られる、とあるので、

<pattern id='pattern' ... style='overflow:visible;' >
としてみましたが変化しません。

SVG の説明書には、'overflow プロパティが visible に設定されている場合のパターン描画のふるまいは未定義'とも書かれています。

いずれにせよ領域からはみ出た部分のループ処理はしてもらえないようです。

今はこうするしかない


ループしている箇所をクローンで埋め、パターンを作成します。

これなら綺麗なシームレスパターンが出力されます。

overflow:visible でこの出力が得られるようになることを期待したいところですが、SVG2でも undefined となっているので遠いようです。