【CSS Modules】fill-ruleプロパティの使い方
fill-ruleプロパティの使い方について、初心者にもわかりやすく解説します。
基本的な使い方
fill-ruleプロパティは、SVG（Scalable Vector Graphics）要素において、図形の内側をどのように塗りつぶすかのルールを定義するプロパティです。主に複数のパスセグメントが交差したり、互いに内包したりする複雑な図形に対して、どの領域を「内部」と見なして塗りつぶすかを制御するために使用されます。
このプロパティは、特に<path>要素などのSVG図形要素に適用され、fillプロパティで指定された色やグラデーションが適用される範囲に影響を与えます。fill-ruleには主にnonzeroとevenoddの二つの値があります。
nonzeroはデフォルト値であり、図形の点から無限遠に向かって仮想的な線を引いた際に、パスの交差方向（時計回りまたは反時計回り）を考慮して塗りつぶし領域を決定します。このルールでは、パスの巻き方向が同じであれば領域が塗りつぶされ、逆向きのパスが内側にあると穴が開くことがあります。一般的には、直感的な塗りつぶし結果が得られます。
一方、evenoddは、図形の点から無限遠に向かって線を引いた際に、その線が交差するパスの数を数え、その数が奇数である場合にのみ、その領域を塗りつぶします。このルールを用いると、内側のパスが常に穴として機能するため、複雑な形状の内側と外側を明確に区別して塗りつぶすことが可能です。例えば、ドーナツのように中央に穴を開けたい場合に、外側の円と内側の円の両方を同じ方向で描画しても、内側の円が穴として認識されます。
このように、fill-ruleプロパティは、SVGで意図したとおりの複雑な図形を描画し、その内部を正確に表現するために非常に重要な役割を果たすプロパティです。
構文(syntax)
1.element { 2 fill-rule: nonzero; 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません