fill-ruleプロパティは、図形の内部領域を指定する際に使われます。
fill-ruleプロパティによって、描かれる図形の内部領域が指定されます。
SVG Tiny 1.2では外部のCSSをサポートしていないので、fill-ruleプロパティの値を指定する場合はfill-rule属性を利用します。
fill-rule属性の値は"nonzero"、"evenodd"、もしくは"inherit"です。
内側か外側かを判定したい点から無限遠まで(と書いてありますが、SVG文書の図形が存在していない領域なら問題ないかと)直線を引き、その直線と図形の輪郭線が交わる箇所を調べます。
"nonzero"の場合は、図形の輪郭線が左から右に交わっていたら+1、右から左に交わっていたら-1とし、全ての交わった箇所について足し合わせます。結果が0でなければその点は図形の内部と、0であれば図形の外部と判定します。交わった向きによるので、図形がどのような順で描画されたのかに影響されます。
"evenodd"の場合は、交わった回数が奇数なら図形の内側、偶数なら図形の外側と判定します。右から左に交わるか左から右に交わるかは関係ありません。
例えば、
<path d="M50,50L150,50 150,150 50,150Z M75,75L125,75 125,125 75,125Z" fill-rule="nonzero">
のように書けば、(100,100)は図形の内部になります。
<path d="M50,50L150,50 150,150 50,150Z M75,75L125,75 125,125 75,125Z" fill-rule="evenodd">
のように書けば、(100,100)は図形の外部になります。
fill-rule属性がない場合は"nonzero"として扱われます。
fill-rule属性は任意の図形要素の属性となりますが、rect、circleおよびellipse要素ではどちらの値をとっても同じように描画されます。
fill-ruleプロパティによって、描かれる図形の内部領域が指定されます。
SVG Tiny 1.2では外部のCSSをサポートしていないので、fill-ruleプロパティの値を指定する場合はfill-rule属性を利用します。
fill-rule属性の値は"nonzero"、"evenodd"、もしくは"inherit"です。
内側か外側かを判定したい点から無限遠まで(と書いてありますが、SVG文書の図形が存在していない領域なら問題ないかと)直線を引き、その直線と図形の輪郭線が交わる箇所を調べます。
"nonzero"の場合は、図形の輪郭線が左から右に交わっていたら+1、右から左に交わっていたら-1とし、全ての交わった箇所について足し合わせます。結果が0でなければその点は図形の内部と、0であれば図形の外部と判定します。交わった向きによるので、図形がどのような順で描画されたのかに影響されます。
"evenodd"の場合は、交わった回数が奇数なら図形の内側、偶数なら図形の外側と判定します。右から左に交わるか左から右に交わるかは関係ありません。
例えば、
<path d="M50,50L150,50 150,150 50,150Z M75,75L125,75 125,125 75,125Z" fill-rule="nonzero">
のように書けば、(100,100)は図形の内部になります。
<path d="M50,50L150,50 150,150 50,150Z M75,75L125,75 125,125 75,125Z" fill-rule="evenodd">
のように書けば、(100,100)は図形の外部になります。
fill-rule属性がない場合は"nonzero"として扱われます。
fill-rule属性は任意の図形要素の属性となりますが、rect、circleおよびellipse要素ではどちらの値をとっても同じように描画されます。