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+ | 是 |