fill-rule

fill-rule CSS 属性定义用于确定 SVG 形状画布的哪些部分包含在要填充的形状内的规则。如果存在，它将覆盖元素的 fill-rule 属性。

fill-rule 阐明了形状的哪些区域应该被认为是形状的“内部”。它提供了两个值，您可以设置这些值来告诉浏览器如何确定形状的内部。对于没有相交路径的形状，如圆形，形状内部的边界是直观的。对于包含相交路径（如维恩图）或路径包围其他路径（如甜甜圈）的复杂形状，可能无法直观地解释形状的哪些部分是形状的“内部”，并且应该由 fill 属性填充。

注意：fill-rule 属性仅适用于 <path>、<polygon>、<polyline>、<text>、<textPath> 和 <tspan> 元素，这些元素嵌套在 <svg> 中。它不适用于其他 SVG、HTML 或伪元素。

语法

css
/* keywords */
fill-rule: evenodd;
fill-rule: nonzero;

/* Global values */
fill-rule: inherit;
fill-rule: initial;
fill-rule: revert;
fill-rule: revert-layer;
fill-rule: unset;

值

nonzero

对于形状中的每个点，都会在一个随机方向上绘制一条射线，超出形状的外边缘。检查每条射线以确定射线与形状交叉的位置。从计数为零开始，每当路径段从左到右与射线交叉时加一，每当路径段从右到左与射线交叉时减一。计数完交叉点后，如果结果为零，则该点在路径外部。否则，它在内部。

evenodd

对于填充规则框中的每个点，都会绘制一条随机方向的射线。计算给定形状的路径段与射线交叉的次数。如果此数字为奇数，则该点在内部；如果为偶数，则该点在外部。零被认为是偶数。

正式定义

在数据库中找不到值！

正式语法

fill-rule = 
  nonzero  |
  evenodd

示例

定义 SVG 元素的填充规则

此示例演示如何声明 fill-rule，该属性的效果以及 CSS fill-rule 属性如何优先于 fill-rule 属性。

HTML

我们定义了一个 SVG，其中包含两个使用 SVG <polygon> 和 <path> 元素定义的复杂形状。该多边形具有设置为 evenodd 的 SVG fill-rule 属性，而星形路径设置为 nonzero，这是默认值。为了使线条可见，我们使用 SVG stroke 属性将轮廓设置为 red（我们也可以使用 stroke 属性）。

html
<svg viewBox="0 0 220 120" xmlns="http://www.w3.org/2000/svg">
  <polygon
    points="180,10 150,100 220,40 140,40 210,100"
    stroke="red"
    fill-rule="evenodd" />
  <path
    d="M 10,5 l 90,0 -80,80 0,-60 80,80 -90,0 z"
    stroke="red"
    fill-rule="nonzero" />
</svg>

上面的 SVG 重复了三次；为了简洁起见，我们只显示了一个副本。

CSS

嵌套在第一个 SVG 中的形状没有应用任何 CSS。我们将第二个 SVG 中的形状设置为使用 nonzero 值。第三个 SVG 中所有嵌套的形状都设置为 evenodd。

css
svg:nth-of-type(2) > * {
  fill-rule: nonzero;
}
svg:nth-of-type(3) > * {
  fill-rule: evenodd;
}

结果

对于 fill-rule 的 nonzero 值，形状的“内部”是整个形状。evenodd 值将一些空间定义为空。第一张图像呈现了作为属性包含的 fill-rule。在 CSS 中声明 fill-rule 将覆盖第二张和第三张图像中的属性值。

规范

规范
CSS 填充和笔触模块级别 3
# fill-rule

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅