fill

Baseline 已廣泛支援

該特性已非常成熟，可在多種裝置和瀏覽器版本上使用。自 2017 年 4 月以來，它已在各大瀏覽器上可用。

fill CSS 屬性定義了 SVG 文字內容和 SVG 形狀的內部畫布如何被填充或繪製。如果存在，它將覆蓋元素的 fill 屬性。

SVG 形狀或文字輪廓內部的區域將被繪製。形狀的“內部”可能並不總是很清晰。定義形狀的路徑可能會重疊。這些複雜形狀中被認為是“內部”的區域由 fill-rule 屬性或特性來明確。

如果子路徑是開放的，fill 會在繪製前關閉路徑，就像包含了一個連線子路徑最後一個點與第一個點的“closepath”命令一樣。換句話說，fill 適用於 path 元素（即沒有 closepath 命令的子路徑）和 polyline 元素中的開放子路徑。

備註：fill 屬性僅適用於巢狀在 <svg> 中的 <circle>、<ellipse>、<path>、<polygon>、<polyline>、<rect>、<text>、<textPath> 和 <tspan> 元素。它不適用於其他 SVG、HTML 或偽元素。

語法

css

/* keywords */
fill: none;
fill: context-fill;
fill: context-stroke;

/* <color> values */
fill: red;
fill: hsl(120deg 75% 25% / 60%);

/* <url> values */
fill: url("#gradientElementID");
fill: url("star.png");

/* <url> with fallback */
fill: url("#gradientElementID") blue;
fill: url("star.png") none;

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

值

none: 不繪製 fill；描邊內部的區域（如果有）是透明的。
context-fill: 使用來自上下文元素的 fill 的繪製值。
context-stroke: 使用來自上下文元素的 stroke 的繪製值。
<color>: 填充的顏色，可以是任何有效的 CSS <color> 值。
<url>: 一個指向 SVG 繪製伺服器元素的 URL 引用，例如 <linearGradient>、<radialGradient> 或 <pattern>。資源引用後面可以跟一個 <color> 或 none，如果引用的繪製伺服器無法解析，則將使用該值作為回退。

正式定義

初始值	`black`
應用於	SVG 形狀和文字內容元素
繼承性	是
計算值	按指定值，但 `<color>` 值會計算，`<url>` 值會轉換為絕對路徑
動畫型別	按計算值型別

正式語法

fill = 
  <paint>  

<paint> = 
  none         |
  <image>      |
  <svg-paint>  

<image> = 
  <url>           |
  <image()>       |
  <image-set()>   |
  <cross-fade()>  |
  <element()>     |
  <gradient>      

<svg-paint> = 
  child               |
  child( <integer> )  

<image()> = 
  image( <image-tags>? [ <image-src>? , <color>? ]! )  

<image-set()> = 
  image-set( <image-set-option># )  

<cross-fade()> = 
  cross-fade( <cf-image># )  

<element()> = 
  element( <id-selector> )  

<image-tags> = 
  ltr  |
  rtl  

<image-src> = 
  <url>     |
  <string>  

<image-set-option> = 
  [ <image> | <string> ] [ <resolution> || type( <string> ) ]?  

<cf-image> = 
  [ <image> | <color> ]  &&
  <percentage [0,100]>?  

<id-selector> = 
  <hash-token>

示例

為 SVG 元素定義填充值

此示例演示瞭如何宣告 fill、該屬性的效果，以及 CSS fill 屬性如何優先於 fill 屬性。

HTML

我們有一個 SVG，其中包含兩個使用 SVG <polygon> 和 <path> 元素定義的複雜形狀。兩者都將 fill 屬性設定為預設的 black。我們使用 SVG stroke 屬性添加了 #666666 的深灰色描邊，但也可以使用 stroke 屬性。

html

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

CSS

我們在 SVG 中的形狀上設定了 fill 值。

svg {
  border: 1px solid;
  height: calc(100vh - 20px);
  margin-bottom: 10px;
}

css

path {
  fill: red;
}
polygon {
  fill: hsl(0deg 100% 50% / 60%);
}

結果

CSS fill 屬性值覆蓋了 SVG fill 屬性值，導致兩個形狀都填充了紅色；多邊形的紅色是半透明的。

使用 fill 關鍵字值

此示例演示了為 fill 使用關鍵字值。

HTML

我們包含了三個 <path> 元素和一個 <marker> 元素，後者為每個路徑點新增一個 <circle>。我們使用 SVG stroke 和 fill 屬性將圓形標記設定為黑色描邊和灰色填充。

html

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 90">
  <path d="M 10 44.64 L 30 10 L 70 10 L 90 44.64 L 70 79.28 L 30 79.28 Z" />
  <path d="M 100 44.64 L 80 10 L 120 10 L 140 44.64 L 120 79.28 L 80 79.28 Z" />
  <path
    d="M 150 44.64 L 130 10 L 170 10 L 190 44.64 L 170 79.28 L 130 79.28 Z" />
  <marker
    id="circle"
    markerWidth="12"
    markerHeight="12"
    refX="6"
    refY="6"
    markerUnits="userSpaceOnUse">
    <circle cx="6" cy="6" r="3" stroke-width="2" stroke="black" fill="grey" />
  </marker>
</svg>

CSS

我們為每個路徑設定了不同的 stroke 和 fill 顏色。第一個路徑，即帶有紅色邊框的那個，其 fill 設定為 none。我們使用 context-stroke 值將圓形標記的描邊和填充設定為與其標記的元素的描邊顏色相同。

svg {
  border: 1px solid;
  height: calc(100vh - 20px);
  margin-bottom: 10px;
}

css

path {
  stroke-width: 2px;
  marker: url("#circle");
}
path:nth-of-type(1) {
  stroke: red;
  fill: none;
}
path:nth-of-type(2) {
  stroke: green;
  fill: lightgreen;
}
path:nth-of-type(3) {
  stroke: blue;
  fill: lightblue;
}
circle {
  stroke: context-stroke;
  fill: context-stroke;
}

結果

注意第一個路徑是如何具有透明背景的，因為 fill 是 none，覆蓋了預設的 fill 值 black。這些圓形被填充了描邊的顏色。如果你將值更改為 context-fill，這些圓形將變為透明、lightgreen 和 lightblue，而不是 red、green 和 blue。

填充和回退值

此示例演示瞭如何將帶有回退值的 url() 作為 fill 值。

HTML

我們有一個 SVG，其中包含兩個 <polygon> 星形和一個從綠色到金色再到紅色的 <linearGradient>。

html

<svg viewBox="0 0 220 120" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="myGradient">
      <stop offset="5%" stop-color="green" />
      <stop offset="50%" stop-color="gold" />
      <stop offset="95%" stop-color="red" />
    </linearGradient>
  </defs>
  <polygon points="80,10 50,100 120,40 40,40 110,100" />
  <polygon points="180,10 150,100 220,40 140,40 210,100" />
</svg>

CSS

我們在 SVG 中的多邊形上設定 fill 值，提供一個 url() 值和一個回退值。

svg {
  border: 1px solid;
  height: calc(100vh - 20px);
  margin-bottom: 10px;
}

css

polygon:first-of-type {
  fill: url("#myGradient") magenta;
}
polygon:last-of-type {
  fill: url("#MISSINGIMAGE") magenta;
}

結果

第一個星形以漸變作為背景。第二個星形使用了回退值，因為 url() 中引用的元素不存在。

規範

規範
CSS 填充與描邊模組 Level 3 # fill-shorthand

瀏覽器相容性

另見

SVG fill 屬性
表示屬性：fill、clip-rule、color-interpolation-filters、fill-opacity、fill-rule、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

瞭解如何貢獻

此頁面的最後修改時間是 ⁨2025 年 8 月 13 日⁩，由 MDN 貢獻者們修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題