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 上檢視此頁面 • 報告此內容的問題