CSS fill 属性值说明
| 值 | 描述 |
|---|---|
| color | 表示形状的颜色。默认颜色是元素的颜色。可以使用颜色名称，十六进制颜色代码，RGB（），RGBA（），HSL（），HSLA（）。填充属性也接受定义的SVG形状模式 |
| initial | 使属性使用其默认值。 |
| inherit | 从父母元素继承属性。 |
SVG 和填充属性
由于填充属性 SVG 比标准图像文件更灵活。
例如，标准图像文件（如 JPG、GIF 或者 PNG）将需要两个版本的图标，每种颜色方案各有一个。
但是在使用 SVG 时，我们可以使用此属性绘制图标，而无需执行上述操作。
我们可以使用以下代码执行此操作：
.icon {
fill: pink;
}
.icon-secondary {
fill: yellow;
}
语法
fill: color | initial | inherit;
填充属性示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
circle {
fill: #1c87c9;
}
</style>
</head>
<body>
<svg viewBox="0 0 100 100">
<circle cx="50" cy="50" r="50" />
</svg>
</body>
</html>
具有“颜色”值的填充属性示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.opacity1 {
fill: red;
}
.opacity2 {
fill: #228B22;
}
.opacity3 {
fill: rgb(255, 165, 0);
}
.opacity4 {
fill: hsl(248, 53%, 58%)
}
</style>
</head>
<body>
<h3>CSS | fill</h3>
<div class="contnerai">
<svg viewBox="0 0 800 800">
<circle class="opacity1" cx="150" cy="150" r="50" />
<circle class="opacity2" cx="300" cy="150" r="50" />
<circle class="opacity3" cx="450" cy="150" r="50" />
<circle class="opacity4" cx="600" cy="150" r="50" />
</svg>
</div>
</body>
</html>
带有图案的填充属性示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.opacity-one {
fill: url(#pattern-one);
}
.opacity-two {
fill: url(#pattern-two);
}
</style>
</head>
<body>
<h3> Fill </h3>
<div class="container">
<svg viewBox="0 0 800 800">
<defs>
<pattern id="pattern-one" viewBox="0, 0, 11, 11" width="15%" height="15%">
<circle r="10" fill="green" />
</pattern>
<pattern id="pattern-two" viewBox="0, 0, 9, 9" width="15%" height="15%">
<rect height="4" width="4" fill="red" />
</pattern>
</defs>
<circle class="opacity-one" cx="150" cy="150" r="55" />
<circle class="opacity-two" cx="300" cy="150" r="55" />
</svg>
</div>
</body>
</html>
fill 属性用于设置 SVG 形状的颜色。
它接受任何颜色值。
我们可以使用我们的颜色选择器工具和 HTML 颜色部分找到 Web 颜色。
为多列元素添加高度，将使我们有机会决定如何用内容填充列。
内容可以依次填充或者平衡。
| 初始值 | black |
|---|---|
| 应用于 | 所有元素。它还适用于伪元素::first-letter 和 ::first-line。 |
| 继承 | 可继承 |
| 可动画的 | 是的。 |
| 版本 | SVG 1.1 |
| DOM 语法 | object.Style.fill =“#8EBF42”; |
日期：2020-06-02 22:14:29 来源：oir作者：oir