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 的瀏覽器中載入。