Fill Properties

styleで塗りつぶしの特性を指定する。style外に直接指定することも出来る。

書き方

style="fill:塗りつぶし色"

style="fill-rule:塗りつぶし規則"

style="fill-opacity:塗りつぶし色の透明度"

fill="塗りつぶし色"

fill-rule="塗りつぶし規則"

fill-opacity="塗りつぶし色の透明度"

fill:塗りつぶし色

塗りつぶす色を指定する。noneを指定した場合、塗りつぶさない(透明)。本特性を指定しない場合、黒とみなされる。

fill-rule:塗りつぶし規則

次の2つから選択する。本特性を指定しない場合、nonzeroとなる。

fill-opacity:塗りつぶし色の透明度

塗りつぶす色の透明度を指定する。1以下の値を指定する。1を指定した場合、又は本特性を指定しない場合、不透明となる。

使用例

塗りつぶし規則

左は、"evenodd"。右は"nonzero"。いずれも外枠と中枠を同じ方向に描画している。

<path d="M 10 20 L 100 60 L 10 100 z M 30 40 L 80 60 L 30 80 z" style="fill:red; fill-rule:evenodd; fill-opacity:1; stroke:black; stroke-width:1" />

<path d="M 100 20 L 190 60 L 100 100 z M 120 40 L 170 60 L 120 80 z" style="fill:red; fill-rule:nonzero; fill-opacity:1; stroke:black; stroke-width:1" />

左は、"evenodd"。右は"nonzero"。いずれも外枠と中枠を逆の方向に描画している。

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN" "http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd">
<svg width="200" height="120" viewBox="0 0 200 120">

<path d="M 10 20 L 100 60 L 10 100 z M 30 80 L 80 60 L 30 40 z" style="fill:red; fill-rule:evenodd; fill-opacity:1; stroke:black; stroke-width:1" />

<path d="M 100 20 L 190 60 L 100 100 z M 120 80 L 170 60 L 120 40 z" style="fill:red; fill-rule:nonzero; fill-opacity:1; stroke:black; stroke-width:1" />

透明度

<path d="M 30 30 L 90 60 L 30 90 z" style="fill:red; fill-rule:evenodd; fill-opacity:1; stroke:black; stroke-width:1" />

<path d="M 60 30 L 120 60 L 60 90 z" style="fill:green; fill-rule:evenodd; fill-opacity:1; stroke:black; stroke-width:1" />

<path d="M 90 30 L 150 60 L 90 90 z" style="fill:green; fill-rule:evenodd; fill-opacity:0.7; stroke:black; stroke-width:1" />

<path d="M 120 30 L 180 60 L 120 90 z" style="fill:green; fill-rule:evenodd; fill-opacity:0.3; stroke:black; stroke-width:1" />