fill
CSS fill Property
The fill property is used for setting the color of an SVG shape. It accepts any color value.
You can find web colors with our Color Picker tool and in the HTML colors section.
Adding a height to a multi-column element, will give you the opportunity to decide how to fill the columns with the content. The content may be filled or balanced successively.
| 类目 | 类目 |
|---|---|
| Initial Value | black |
| Applies to | All elements. It also applies to ::first-letter and ::first-line. |
| Inherited | Yes. |
| Animatable | Yes. |
| Version | SVG 1.1 |
| DOM Syntax | object.style.Fill = “#8ebf42”; |
Syntax
Syntax
fill: color | initial | inherit;
Example of the fill property:
<!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>
Result
Example of the fill property with the “color” value:
<!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>
Example of the fill property with patterns:
<!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>
SVG and the fill property
SVG and the fill property
Due to the fill property SVG is more flexible than standard image files. For example, standard image files, like JPG, GIF or PNG, will require two versions of icons - each one for each color scheme. But when using SVG, we can paint the icons using this property and without having to do the presented above. You can do this using the code below:
.icon {
fill: pink;
}
.icon-secondary {
fill: yellow;
}
Values
Values
| Value | Description |
|---|---|
| color | Indicates the color of the shape. Default color is the color of the element. Color names, hexadecimal color codes, rgb(), rgba(), hsl(), hsla() can be used. Fill property also accepts the patterns of SVG shapes that are define |
| initial | Makes the property use its default value. |
| inherit | Inherits the property from its parents element. |