SVGfill属性

SVG形状のfillはその輪郭内の形状の色を定義します。言い換えれば、SVG形状の表面です。塗りつぶしは、SVG形状に設定できる基本的なSVG CSS属性の1つです。

塗りつぶしの例

SVG形状の塗りつぶしは形状の輪郭内の塗りつぶしです。これはSVGの塗りつぶしの例です：

<svg　width="500"　height="100"><circle　cx="50"　cy="50"　r="25"
　　　　　　　　style="枠線:　なし;　塗りつぶし:　#0000ff;"　/></svg>

この例では、青色(#0000ff)で塗りつぶし色を定義した円で描画され、枠線色が指定されていません。以下は生成された画像です：

塗りつぶしと枠線の例

SVGの枠線色と塗りつぶし色を組み合わせてSVG形状を作成できます。これはSVGの枠線と塗りつぶしの例です：

<svg　width="500"　height="100"><circle　cx="50"　cy="50"　r="25"
　　　　　　　　style="枠線:　#000066;　塗りつぶし:　#3333ff;"　/></svg>

この例では、深い青色(#000066枠線色と少し薄い青色(#3333ff)でフィルリング色を定義します。以下は生成された画像です：

fill-opacity

SVGのCSS属性 fill-opacityは形状のフィルリング色の不透明度を設定します。fill-opacityは0と1の間で使用されます。1の間の数値です。数値が0に近いほど、フィルリングは透明です。数値が1、フィルリングはより不透明です。デフォルトのfill-opacityの値が1、これは完全に不透明な色を意味します。

これはSVGのフィルリング不透明度 fill-opacityの例、2つの異なる(fill-opacity)を使用する円：

<svg　width="500"　height="120">
<text　x="22"　y="40">Shape Behind Text</text>
<circle　cx="50"　cy="50"　r="25"
　　　　　　　　style="stroke:　none;　fill:　#0000ff;
　　　　　　　　　　　　　　　fill-opacity:　0.3;　　"></path>
<circle　cx="120"　cy="50"　r="25"
　　　　　　　　style="stroke:　none;　fill:　#0000ff;
　　　　　　　　　　　　　　　fill-opacity:　0.7;　　"></path>
</svg>

これは生成された画像です。

注意してください、右の円の後ろのテキストは左の円の後ろのテキストよりも見えにくいです。それは右の円のfillが、-opacityは左の円よりも高いです。

fill-rule

fill-ruleで決定される複雑な形状のフィルリング方法です。fill-ruleは2つの異なる値を取ることができます。これらの値は：

• nonzero

• evenodd

通常、これらの値は形状の内部と外部の形状を決定するルールです。内部のみのフィルリング、円の場合は簡単ですが、より複雑な形状の場合は簡単ではありません。この　<path>の例を見てください：

<svg　width="500"　height="120">
<path　d="M50,20　l40,40　l-40,40　l-40,-40　l40,-40
　　　　　　　　　M50,40　l20,20　l-20,20　l-20,-20　l20,-20"
　　　　　　　　　style="stroke:　#000000;
　　　　　　　　　fill:　#6666ff;
　　　　　　　　　fill-rule:　nonzero;
　　　　　　></path>
<path　d="M150,20　l40,40　l-40,40　l-40,-40　l40,-40
　　　　　　　　　M150,40　l-20,20　l20,20　l20,-20　l-20,-20"
　　　　　　　　　style="stroke:　#000000;
　　　　　　　　　fill:　#6666ff;
　　　　　　　　　fill-rule:　nonzero;"></path>
</svg>

この2つのパスの例にはそれぞれ、8本線、各線は菱形で描かれ、大きな菱形は小さな菱形を含みます。左側のパスでは、内部の菱形は左から右に（時計回り）描かれます。右側のパスでは、内部の菱形は右から左に（反時計回り）描かれます。これはfillを使用して、-rule：non-zeroで描画された結果の画像

ご覧の通り、nonzeroルールは形状の内部の菱形の方向と形状に基づいて内部の菱形を描きます。点が形状の内部か外部かを決定するnonzeroルールは：

点から無限遠まで任意の方向に線を引きます（線分）。形状の中のパスがこの線分を通るたびに、パスが左から右に線分を通る場合は、1カウンタに加えます；パスが右から左に線を通る場合は、カウンタから減ります。1すべての線を通るパスを計算した後、合計が0であれば、その点はパスの外と見なされます。合計が0でない場合は、点はパスの内と見なされます。

これは同じパスの例です。fillを使用して、-rule：evenodd

<svg　width="500"　height="120">
<path　d="M50,20　l40,40　l-40,40　l-40,-40　l40,-40
　　　　　　　　　M50,40　l20,20　l-20,20　l-20,-20　l20,-20"
　　　　　　style="stroke:　#000000;
　　　　　　fill:　#6666ff;
　　　　　　fill-rule:　evenodd;"　></path>
<path　d="M150,20　l-40,40　l40,40　l40,-40　l-40,-40
　　　　　　　　　M150,40　l-20,20　l20,20　l20,-20　l-20,-20"
　　　　　　style="stroke:　#000000;
　　　　　　fill:　#6666ff;
　　　　　　fill-rule:　evenodd;"　></path>
</svg>

実行後の画像効果：

evenoddは「奇数偶数」のことです。このルールに従って、ポイントが図形内にあるかどうかを判断します。任意の方向からポイントに向かって線（射線）を引いて、射線と図形のパスの交点の数を検出します。任意の方向からポイントから無限遠方に線（射線）を描きます。パスが射線を通過するたびに、カウンタを増やします。合計が偶数の場合、ポイントは外側です。合計が奇数の場合、ポイントは形状の内部に位置しています。