fill-rule

Baseline 已广泛支持

该特性已非常成熟，可在多种设备和浏览器版本上使用。自 2017 年 4 月以来，它已在各大浏览器上可用。

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

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

注意： fill-rule 属性仅适用于嵌套在 <svg> 中的 <path>、<polygon>、<polyline>、<text>、<textPath> 和 <tspan> 元素。它不适用于其他 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: 对于填充规则框中的每个点，以随机方向绘制一条射线。计算射线穿过的给定形状的路径段数。如果此数为奇数，则该点在内部；如果为偶数，则该点在外部。零被视为偶数。

正式定义

初始值	`nonzero`
应用于	SVG 形状和文本内容元素
继承性	是
计算值	同指定值
动画类型	离散

正式语法

fill-rule = 
  nonzero  |
  evenodd

示例

定义 SVG 元素的填充规则

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

HTML

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

<p>Original SVG</p>

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>

<p><code>fill-rule: nonzero;</code></p>
<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>
<p><code>fill-rule: evenodd;</code></p>
<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。

svg {
  border: 1px solid;
  height: calc(33vh - 2.5em);
  margin-bottom: 10px;
}
p {
  margin: 0;
}

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 填充与描边模块 Level 3 # fill-rule

浏览器兼容性

另见

SVG fill-rule 属性
呈现属性：fill-rule、clip-rule、color-interpolation-filters、fill-opacity、fill、marker-end、marker-mid、marker-start、shape-rendering、stop-color、stop-opacity、stroke、stroke-dasharray、stroke-dashoffset、stroke-linecap、stroke-linejoin、stroke-miterlimit、stroke-opacity、stroke-width、text-anchor 和 vector-effect
opacity
background-color
<color>
<basic-shape> 数据类型

帮助改进 MDN

了解如何贡献

此页面最后由 MDN 贡献者于 2025年7月14日修改。

在 GitHub 上查看此页面 • 报告此内容的问题