2010年6月12日土曜日

inkscapeで背景色ありのパターン : 補足

以前書いた「inkscapeで背景色ありのパターン」の補足です。 以前の投稿では「パターンの土台に四角形を作り、塗りつぶすとアラが出る」と書きましたが、アラを出さない方法が分かったのでメモ。 まだSVGに触り始めたばかりで仕様について詳しくありません。 そのため、バッドノウハウかもしれないですが一応投稿しておきます。

一言で言うと、「土台を少し大きめに作ってパターン登録し、XMLエディタでパターンのサイズを本来の数字に書き換える」という方法です。 前に投稿したやり方では土台同士の隙間がアラになっていました。 土台を大きめにすることでパターンで並べられた土台同士が重なり合い、隙間を消すことができます。 以下、簡単な説明です。

パターンに使うのは以前の投稿で使ったのと同じサクランボっぽい何かです。 作るパターンのサイズは100×100pxです。 そのサイズの正方形(ストローク幅ゼロ、ストローク塗りなし)の上に配置しています。

実物が小さいので説明用の画像は大きめにしてます。 土台の四角形は、位置やサイズを数値で直接指定した方がやりやすいです。 ツールバーでキリのいい数字を入力しましょう。

ツールバーの数字を書き換えて、土台を少し拡大します。 ここでは10%増やして110pxに。

土台の左上から100×100pxがパターンに使われます。 SVGの座標では左上が原点になるからです。 inkscapeの座標は左下が原点。 まぎらわしいですね。 パターンに使うオブジェクトを拡大した分だけ上に移動しましょう。 対象のオブジェクトをドラッグで囲んで、ツールバーの「Y」を+10pxすればまとめて移動できます。

そしてパターン登録。

最後に編集メニュー/XMLエディタでパターンのwidthとheightを100に書き換えます。 /svg:svg/svg:defs/svg:patternでidが一致するものを探しましょう。 ついでにidも分かりやすい文字列に変えておくと、塗りつぶすときに楽です。