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 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¶
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>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¶
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¶
| Value | Description |
|---|---|
| color | Indicates the color of the shape. The 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 defined |
| initial | Makes the property use its default value. |
| inherit | Inherits the property from its parent's element. |
0 Comments
CAN FEEDBACK
Emoji