fill-rule
fill-rule 屬性是一個演示屬性，用於定義用於確定形狀內部部分的演算法。
注意： 作為演示屬性，fill-rule 還有一個對應的 CSS 屬性：fill-rule。當兩者都指定時，CSS 屬性具有更高的優先順序。
你可以將此屬性與以下 SVG 元素一起使用
示例
html
<svg viewBox="-10 -10 220 120" xmlns="http://www.w3.org/2000/svg">
<!-- Default value for fill-rule -->
<polygon
fill-rule="nonzero"
stroke="red"
points="50,0 21,90 98,35 2,35 79,90" />
<!--
The center of the shape has two
path segments (shown by the red stroke)
between it and infinity. It is therefore
considered outside the shape, and not filled.
-->
<polygon
fill-rule="evenodd"
stroke="red"
points="150,0 121,90 198,35 102,35 179,90" />
</svg>
用法說明
| 值 | nonzero | evenodd |
|---|---|
| 預設值 | nonzero |
| 可動畫的 | 離散 |
fill-rule 屬性提供了兩種確定形狀內部（即要填充的區域）的方法。
nonzero
nonzero 值透過從該點向任意方向畫一條射線到無窮遠處，然後檢查形狀的某個片段穿過射線的點來確定點在形狀中的“內側”。從零開始計數，每當路徑片段從左到右穿過射線時加一，每當路徑片段從右到左穿過射線時減一。計數穿過點後，如果結果為零，則該點在路徑外部。否則，它在內部。
示例
html
<svg viewBox="-10 -10 320 120" xmlns="http://www.w3.org/2000/svg">
<!-- Effect of nonzero fill rule on crossing path segments -->
<polygon
fill-rule="nonzero"
stroke="red"
points="50,0 21,90 98,35 2,35 79,90" />
<!--
Effect of nonzero fill rule on a shape inside a shape
with the path segment moving in the same direction
(both squares drawn clockwise, to the "right")
-->
<path
fill-rule="nonzero"
stroke="red"
d="M110,0 h90 v90 h-90 z
M130,20 h50 v50 h-50 z" />
<!--
Effect of nonzero fill rule on a shape inside a shape
with the path segment moving in the opposite direction
(one square drawn clockwise, the other anti-clockwise)
-->
<path
fill-rule="nonzero"
stroke="red"
d="M210,0 h90 v90 h-90 z
M230,20 v50 h50 v-50 z" />
</svg>
evenodd
evenodd 值透過從該點向任意方向畫一條射線到無窮遠處，並計算射線穿過的給定形狀的路徑片段數量來確定點在形狀中的“內側”。如果這個數量是奇數，則點在內部；如果為偶數，則點在外部。
示例
html
<svg viewBox="-10 -10 320 120" xmlns="http://www.w3.org/2000/svg">
<!-- Effect of evenodd fill rule on crossing path segments -->
<polygon
fill-rule="evenodd"
stroke="red"
points="50,0 21,90 98,35 2,35 79,90" />
<!--
Effect of evenodd fill rule on a shape inside a shape
with the path segment moving in the same direction
(both squares drawn clockwise, to the "right")
-->
<path
fill-rule="evenodd"
stroke="red"
d="M110,0 h90 v90 h-90 z
M130,20 h50 v50 h-50 z" />
<!--
Effect of evenodd fill rule on a shape inside a shape
with the path segment moving in opposite direction
(one square drawn clockwise, the other anti-clockwise)
-->
<path
fill-rule="evenodd"
stroke="red"
d="M210,0 h90 v90 h-90 z
M230,20 v50 h50 v-50 z" />
</svg>
規範
| 規範 |
|---|
| Scalable Vector Graphics (SVG) 2 # WindingRule |
瀏覽器相容性
載入中…
另見
- CSS
fill-rule屬性