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属性