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 上查看此页面 • 报告此内容的问题