fill

The fill CSS 属性定义了如何填充或绘制 SVG 文本内容和 SVG 形状的内部画布。如果存在，它将覆盖元素的 fill 属性。

SVG 形状或文本轮廓内部的区域被绘制。什么是形状的“内部”可能并不总是清楚。定义形状的路径可能重叠。fill-rule 属性或属性阐明了被认为是这些复杂形状“内部”的区域。

如果子路径是开放的，fill将在绘制之前关闭路径，就像包含连接子路径的最后一个点和子路径的第一个点的“closepath”命令一样。换句话说，fill应用于path元素（即，没有 closepath 命令的子路径）和polyline元素中的开放子路径。

注意：fill属性仅适用于嵌套在 <svg> 中的 <circle>、<ellipse>、<path>、<polygon>、<polyline>、<rect>、<text>、<textPath>、<tref> 和 <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，如果引用的绘制服务器无法解析，则将使用它作为回退。

正式定义

在数据库中找不到值！

正式语法

fill = 
  <paint>  

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

<image> = 
  <url>       |
  <gradient>  

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

<url> = 
  <url()>  |
  <src()>  

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )

示例

为 SVG 元素定义填充值

此示例演示了如何声明fill，该属性的效果以及 CSS fill 属性如何优先于fill属性。

HTML

我们有一个 SVG，其中包含使用 SVG <polygon> 和 <path> 元素定义的两个复杂形状。两者都将fill属性设置为#000（等效于默认值black）。我们使用 SVG stroke 属性添加了#666 的深灰色笔划，但可以使用 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="#666"
    fill="#000" />
  <polygon
    points="180,10 150,100 220,40 140,40 210,100"
    stroke="#666"
    fill="#000" />
</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使用关键字值。

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。

填充和回退

此示例演示了如何在fill值中包含带有回退的url()值。

HTML

我们有一个包含两个<polygon>星形和一个<linearGradient>的 SVG，该线性渐变从绿色到金色到红色。

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 Fill and Stroke Module Level 3 # fill-shorthand

浏览器兼容性

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

另请参阅

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> 数据类型