CSS3: fill-rule プロパティ  編集:2021.11.13 by T.A.

図形形状に於ける重なり方法。→MS

名前 fill-rule
nonzero | evenodd
初期値 nonzero
適用対象 図形要素テキスト内容要素
継承 される
百分率 受容しない
算出値 指定されたキーワード
アニメーション型 離散的

fill-rule プロパティは、キャンバス上のどの部分が図形の内側に含まれるかを決定するアルゴリズム(巻き数規則)を指示する。単純な交差していないパスにおいては、どの領域が“内側”にあるかは直感的に明瞭である。しかしながら、より複階的なパス ― 自身に交差しているパスや、ある下位パスが別の下位パスを封入しているパスなど ― における“内側”の解釈は、それほど明らかではない。

それを明らかにするため、まず、所与の点の“巻き数”が次に従って定義される:

  1. まず、点から無限遠へ射線を描く。どの方向でも用を為すが、図形を成す あるパス区分に重なるか接する場合には、そうならないよう射線を選び直す。
  2. 巻き数は、点から見て、図形を成すパス区分たちが[射線の左から右へ交わる回数]から[射線の右から左へ交わる回数]を減算した結果とする。

fill-rule プロパティは、図形の内側を決定する方法として、次の 2 つのオプションを供する:

nonzero
この規則においては、キャンバス上の点は、その“巻き数”に応じて、0 でないならばパスの外側にあるとされ、0 ならば内側にあるとされる。

nonzero 規則の図解:

↑パスを成すある下位パスが[自身に交差している/別の下位パスに封入されている]ときの、nonzero フィル規則による効果。

evenodd
この規則においては、キャンバス上の点は、その“巻き数”に応じて、奇数ならば、パスの内側にあるとされ、偶数ならば外側にあるとされる。

evenodd 規則の図解:

↑パスを成すある下位パスが[自身に交差している/別の下位パスに封入されている]ときの、evenodd フィル規則による効果。


テスト
HTML:

ここに表示
[Edge]○
HTML:

ここに表示