図形の塗り潰しの仕方を変更
SVGで図形の塗り潰しの仕方を変更するには、fill-rule属性を使用します。
構文
fill-rule="方法"属性値
属性の値は次の指定が可能です。
| 値 | 説明 |
|---|---|
| nonzero初期値 | 内側にある時計回り（右回り）のパスを1、反時計回り（左回り）のパスを-1とした時に、総和が0の時は外側にあるとし、それ以外は内側とする。 |
| evenodd | 内側にある時計回り（右回り）のパスを1、反時計回り（左回り）のパスを-1とした時に、総和が偶数の時は外側にあるとし、奇数と時は内側とする。 |
属性の値の初期値はnonzeroで、属性を省略するとこの値が設定されます。
サンプルコードとデモ
内外：時計回り
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 90" width="200" height="90">
<path d="M 0,0 h 90 v 90 h -90 Z M 20,20 h 50 v 50 h -50 Z" />
<path d="M 100,0 h 90 v 90 h -90 Z M 120,20 h 50 v 50 h -50 Z" fill-rule="evenodd" />
</svg>内：反時計回り 外：時計回り
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 90" width="200" height="90">
<path d="M 0,0 h 90 v 90 h -90 Z M 20,20 v 50 h 50 v -50 Z" />
<path d="M 100,0 h 90 v 90 h -90 Z M 120,20 v 50 h 50 v -50 Z" fill-rule="evenodd" />
</svg>