fill-rule

fill-rule 属性是一个表示属性，用于定义确定形状内部部分的算法。

注意： 作为表示属性，fill-rule 可以用作 CSS 属性。

您可以将此属性与以下 SVG 元素一起使用

示例

html,
body,
svg {
  height: 100%;
}

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 值通过从形状中的某个点向任意方向绘制一条射线到无穷远，然后检查形状的线段与射线相交的位置来确定该点在形状中的“内部性”。从 0 开始计数，每当路径线段从左到右与射线相交时加 1，每当路径线段从右到左与射线相交时减 1。计算完相交次数后，如果结果为零，则该点位于路径外部。否则，该点位于路径内部。

示例

html,
body,
svg {
  height: 100%;
}

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,
body,
svg {
  height: 100%;
}

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>

规范

规范
可缩放矢量图形 (SVG) 2 # 绕线规则

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。