fill-rule
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2017.
fill-rule
は CSS のプロパティで、SVG シェイプのキャンバスのどの部分が塗りつぶすシェイプ内に記載されるかを決定するルールを定義します。これが存在する場合、要素の fill-rule
属性よりも優先されます。
fill-rule
は、図形のどの領域を「図形の内側」とみなすかを明確にします。図形の内部をどのように決定するかをブラウザーに指示するために設定できる 2 つの値を提供します。円と同様に、交差するパスが存在しない図形の場合、塗りつぶす図形の内部境界は直感的に明らかです。交差するパスを含む複雑な図形(ベン図など)や、他のパスを囲むパス(ドーナツなど)は、図形のどの領域が図形の「内部」であり、fill
プロパティによって塗りつぶすべきかを判断することが難しいため、このプロパティを使用すると便利です。
メモ:
fill-rule
プロパティは、 <svg>
に含まれる <path>
、<polygon>
、 <polyline>
、<text>
、<textPath>
、<tspan>
要素に適用されます。他の SVG 要素、HTML 要素、または擬似要素には適用されません。
構文
/* keywords */
fill-rule: evenodd;
fill-rule: nonzero;
/* Global values */
fill-rule: inherit;
fill-rule: initial;
fill-rule: revert;
fill-rule: revert-layer;
fill-rule: unset;
値
nonzero
-
図形内のすべての点について、図形の外縁を越える方向にランダムな方向に光線が描画されます。それぞれの光線が図形と交差する場所を調べるために、各光線が調べられます。カウントを 0 から始めて、パス区間が光線を左から右に交差するたびに 1 を追加し、パス区間が光線を右から左に交差するたびに 1 を減算します。交差の回数を数えた後、結果が 0 の場合、その点はパスの外側にあることになります。それ以外の場合は、その点はパスの内側にあることになります。
evenodd
-
塗りつぶし規則のボックス内のすべての点について、ランダムな方向に光線が描画されます。光線が指定された図形から交差するパスの区間の数がカウントされます。この数値が奇数の場合、その点は内側にあり、偶数の場合、その点は外側にあります。0 は偶数と見なされます。
公式定義
初期値 | nonzero |
---|---|
適用対象 | SVG shapes and text content elements |
継承 | あり |
計算値 | 指定通り |
アニメーションの種類 | 離散値 |
形式文法
fill-rule =
nonzero |
evenodd
例
SVG 要素の塗りつぶしルールを定義
この例では、fill-rule
の宣言方法、プロパティの効果、および CSS fill-rule
プロパティが fill-rule
属性よりも優先される仕組みについて示しています。
HTML
SVG <polygon>
および <path>
要素を使用して定義された 2 つの複雑な形状を持つ SVG を定義します。多角形には SVG fill-rule
属性が evenodd
に設定され、星形のパスは既定の nonzero
に設定されています。行を表示するには、SVG の stroke
属性を使用して概要を red
に設定します(代わりに stroke
プロパティを使用することもできます)。
<svg viewBox="0 0 220 120" xmlns="http://www.w3.org/2000/svg">
<polygon
points="180,10 150,100 220,40 140,40 210,100"
stroke="red"
fill-rule="evenodd" />
<path
d="M 10,5 l 90,0 -80,80 0,-60 80,80 -90,0 z"
stroke="red"
fill-rule="nonzero" />
</svg>
上記の SVG は 3 回繰り返されていますが、簡潔にするため 1 つのコピーのみを示しています。
CSS
最初の SVG に内包されている図形には CSS は適用されていません。 2 つ目の SVG 内の図形は、 nonzero
値を使用するように設定します。 3 つ目の SVG では、入れ子になっているすべての図形が evenodd
に設定されています。
svg:nth-of-type(2) > * {
fill-rule: nonzero;
}
svg:nth-of-type(3) > * {
fill-rule: evenodd;
}
結果
fill-rule
の値が nonzero
の場合、図形の「内部」は図形全体になります。 evenodd
の値は、一部の空間を空として定義します。最初の画像は、属性として含まれている fill-rule
をレンダリングしています。CSS で fill-rule
を宣言すると、2 つ目と 3 つ目の画像の属性値が上書きされます。
仕様書
Specification |
---|
CSS Fill and Stroke Module Level 3 # fill-rule |
ブラウザーの互換性
関連情報
- SVG の
fill-rule
属性 - プレゼンテーションプロパティ:
fill-rule
,clip-rule
,color-interpolation-filters
,fill-opacity
,fill
,marker-end
,marker-mid
,marker-start
,shape-rendering
,stop-color
,stop-opacity
,stroke
,stroke-dasharray
,stroke-dashoffset
,stroke-linecap
,stroke-linejoin
,stroke-miterlimit
,stroke-opacity
,stroke-width
,text-anchor
,vector-effect
opacity
background-color
<color>
<basic-shape>
データ型