お絵描きソフトInkscape(インクスケープ)の使い方を初級レベルから上級レベルまで広く紹介しています。
情報追加のリクエストや分かりにくい点があれば下のCONTACTフォームからどうぞ。

Inkscapeのパスの塗りつぶしのルール

 このページでは、Inkscapeで入り組んだパスを描いたときにどの部分を塗りつぶすのかを決める法則(ルール)について紹介します。

 (参考:バケツ(塗りつぶし)ツールの詳細

(2024.01.10更新)

塗りつぶしのルールとは?

 そもそも塗りつぶしのルールとは何かというと、

こんな風に、パスが自分自身と交差していたり、パスの中に別の小さなパス(サブパス)があったりするような複雑に絡み合ったパスの内側で区切られた領域のどれとどれをフィルとして塗りつぶしの対象とするかを決定するルールのことです。

 Inkscapeでは、SVG形式の仕様として定義されている2種類の塗りつぶしルールから選択できます。

2つの塗りつぶしルール

 Inkscapeには(というかSVG形式の仕様には)2種類のルールがあって、「even-odd rule(偶数奇数ルール?)」と「non-zero rule(非ゼロルール?)」とがあり、どちらもSVG形式であるか否かによらずドローツール一般で多くサポートされているルールらしいです。

 even-oddルールでは、次のように塗りつぶされます。

 non-zeroルールでは、次のように塗りつぶされます。

even-oddルールの詳細

 パスオブジェクトの外側から直線の矢印を引いたときに、パスを越えて新たな領域に突入する度にカウンタをカウントアップしていき、カウンタが奇数になるような領域はフィルとして塗りつぶすというルールだそうです。他にもいろんな説明の仕方(定義?)があるようですが、個人的にはこの説明が一番わかりやすかったです。どの説明も数学的には同じことを言っているのだと思いますが。

 上のパスオブジェクトの例でやってみると次のようになります。

non-zeroルールの詳細

 パスオブジェクトの外側から直線の矢印を引いたときに、パスを越えて新たな領域に突入する度にカウンタをカウントアップまたはカウントダウンしていき、カウンタがゼロでないような領域はフィルとして塗りつぶすというルールだそうです。

 カウントアップするのかカウントダウンするのかは、交わるパスの「向き」によります。直線の矢印の進む方向に対して交わるパスの向きが右側から左側である場合はカウントアップし、逆に左側から右側である場合はカウントダウンします。

 デフォルトではパスの「向き」は時計回りですが、パス > 向きを逆にメニューを操作すると「向き」を反転させることができます。なお、通常のパスではその「向き」は見た目に分からないですが、ストロークのスタイルとして、パスのノードの位置に表示するマーカに矢印のような向きの分かりやすいマーカを設定すると、各パスの「向き」も見た目で区別が付くようになるので、塗りつぶしのルールがどのように適用されているのかを確認することもできます。

  (参考:マーカーを描く

 上のサンプルのパスオブジェクトに矢印状のマーカを設定して表示させた上で、ルールとしてnon-zeroルールを設定してみると次のようになります。

 この例では、パスの向きが全てデフォルトの時計回りになっているので、一番外側のパスよりも内側は全部塗りつぶされることになります。これを「要するに全部塗るということね」と理解するのは間違いで、次のように、下半分の楕円2つの「向き」を反転させてみると、

 こんな風に、途中にカウンタがゼロになる領域が出てきて、そこは塗りつぶされないことになります。

 2回ひねった形のパスの場合も、2つ目のループはパスの向きが反対になるので、その内側はフィルになりません。

 しかし、この2種類のルール、具体的にどういう目的で切り替えて使えばいいのかはよくわかりません。入り組んだパスの塗りつぶしをコントロールしたい場合は、サブパスを結合したものにするのではなくて、独立したパスオブジェクトをたくさん作って重なるように描画してグループ化したりしておいて、各パスオブジェクトごとに塗りつぶしのスタイルを設定していったほうが意図したとおりの絵図にしやすいのじゃないかと思うのですが、どうなんでしょう?

ルールを設定する操作

 フィル/ストロークダイアログのフィルタブの右上に次のような2つのボタンがあり、クリックしたほうのルールがパスオブジェクトに設定されます。

 ちなみに、フィルタブの右上にあるのと同じようにストロークの塗りタブにもこれらのボタンがありますが、押しても何も起こらないようです。それはもちろんそうで、SVG形式のスタイルとして「fill-rule」はあっても「stroke-rule」はないので。もしストロークの塗りタブのほうのボタンを押してルールを切り替えたつもりになってもSVG形式ファイルには保存されないし、そのファイルを再度Inkscapeで読み込むと元に戻ってしまいます。