【CSS Modules】clip-ruleプロパティの使い方
clip-ruleプロパティの使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
clip-ruleプロパティは、SVG（Scalable Vector Graphics）におけるクリッピングパスが複数のサブパスで構成されている場合に、どの領域を「内部」と見なすかを決定する規則を保持するプロパティです。クリッピングパスとは、特定のグラフィック要素の表示領域を制限するためのマスクのようなものであり、このプロパティはそのマスクの適用方法に影響を与えます。
主に以下の二つの値が使用されます。
-
nonzero：この規則では、ある点から無限遠点へ仮想的な線を引き、その線がクリッピングパスの各サブパスと交差する回数を数えます。時計回りの交差を正の数、反時計回りの交差を負の数として合計し、その合計がゼロでない場合にその点を「内部」と見なします。これがデフォルト値であり、多くの場合で直感的な結果が得られます。 -
evenodd：この規則では、nonzeroと同様に仮想的な線を引きますが、パスとの交差回数を単純に数えます。その合計が奇数であればその点を「内部」と見なし、偶数であれば「外部」と見なします。これにより、複雑な図形や自己交差するパスにおいて、交互に内部と外部が切り替わるような効果を表現できます。
このプロパティは、特に複雑な形状を持つクリッピングパスを作成する際に、表示したい領域と表示したくない領域を正確に指定するために重要です。SVGのfill-ruleプロパティと非常に類似した動作をするため、パスの描画ルールを理解している方には馴染みやすいでしょう。
公式リファレンス: clip-rule
構文(syntax)
1.selector { 2 clip-rule: nonzero; 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません