填充

Avatar of Geoff Graham
Geoff Graham

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 $200 免费额度!

CSS 中的 fill 属性用于填充 SVG 形状的颜色。

.eyeball {
  fill: red;
}

记住

  • 这将覆盖表示属性 <path fill="#fff" ... />
  • 这将不会覆盖内联样式,例如 <path style="fill: #fff;" ... />

fill 属性可以接受任何 CSS 颜色值。

  • 命名颜色 — orange
  • 十六进制颜色 — #FF9E2C
  • RGB 和 RGBa 颜色 — rgb(255, 158, 44)rgba(255, 158, 44, .5)
  • HSL 和 HSLa 颜色 — hsl(32, 100%, 59%)hsla(32, 100%, 59%, .5)

作为奖励,fill 还接受在 defs 元素内部定义的 SVG 形状的图案

.module {
  fill: url(#pattern);
}

查看 CodePen 上的示例 fill 属性,由 CSS-Tricks (@css-tricks) 创建。

用例

fill 的一个常见用例是更改 SVG 在悬停时的颜色,就像我们在为链接悬停设置样式时使用 color 一样。

.icon {
  fill: black;
}

.icon:hover {
  fill: orange;
}

查看 CodePen 上的示例 fill 属性,由 CSS-Tricks (@css-tricks) 创建。

另一个用例

fill 属性是 SVG 比传统图像文件灵活得多的众多原因之一。以图标为例。

我们可能有相同的一组图标,但有两种不同的配色方案。传统的图像文件(如 JPG、PNG 和 GIF)需要我们制作每个图标的两个版本——每个配色方案一个。

另一方面,SVG 允许我们使用 CSS fill 属性来绘制图标

.icon {
  fill: black;
}

.icon-secondary {
  fill: orange;
}

现在,我们可以通过更改路径或形状的类名,将同一个 SVG 文件用于多种场景。

查看 CodePen 上的示例 fill 属性,由 CSS-Tricks (@css-tricks) 创建。

更多信息

浏览器支持

Chrome Safari Firefox Opera IE Android iOS
9+ 4.4+