styleで塗りつぶしの特性を指定する。style外に直接指定することも出来る。
style="fill:塗りつぶし色"
style="fill-rule:塗りつぶし規則"
style="fill-opacity:塗りつぶし色の透明度"
fill="塗りつぶし色"
fill-rule="塗りつぶし規則"
fill-opacity="塗りつぶし色の透明度"
塗りつぶす色を指定する。noneを指定した場合、塗りつぶさない(透明)。本特性を指定しない場合、黒とみなされる。
次の2つから選択する。本特性を指定しない場合、nonzeroとなる。
塗りつぶす色の透明度を指定する。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" /> |