Свойство CSS fill
Свойство CSS fill используется для задания внутреннего цвета SVG-фигуры. Оно принимает значения цвета, none, currentColor и ссылки url().
Вы можете подобрать веб-цвета с помощью нашего инструмента Color Picker и в разделе HTML colors.
| Initial Value | currentColor |
|---|---|
| Applies to | Все SVG-фигуры, элементы text и textPath. |
| Inherited | Yes. |
| Animatable | Yes. |
| Version | SVG 1.1 |
| DOM Syntax | object.style.fill = "#8ebf42"; |
Синтаксис
Синтаксис свойства CSS fill
css
fill: color | none | currentColor | url(<id>) | initial | inherit;Пример свойства fill:
html
<!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>Результат
Пример свойства fill со значением "color":
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.fill-1 {
fill: red;
}
.fill-2 {
fill: #228B22;
}
.fill-3 {
fill: rgb(255, 165, 0);
}
.fill-4 {
fill: hsl(248, 53%, 58%)
}
</style>
</head>
<body>
<h3>CSS | fill</h3>
<div class="container">
<svg viewBox="0 0 800 800">
<circle class="fill-1" cx="150" cy="150" r="50" />
<circle class="fill-2" cx="300" cy="150" r="50" />
<circle class="fill-3" cx="450" cy="150" r="50" />
<circle class="fill-4" cx="600" cy="150" r="50" />
</svg>
</div>
</body>
</html>Пример свойства fill со значением "currentColor":
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.text-container {
color: #1c87c9;
}
.fill-current {
fill: currentColor;
}
</style>
</head>
<body>
<div class="text-container">
<svg viewBox="0 0 100 100">
<circle class="fill-current" cx="50" cy="50" r="50" />
</svg>
</div>
</body>
</html>Пример свойства fill с узорами:
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.fill-pattern-1 {
fill: url(#pattern-one);
}
.fill-pattern-2 {
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%" patternUnits="objectBoundingBox">
<circle r="10" fill="green" />
</pattern>
<pattern id="pattern-two" viewBox="0 0 9 9" width="15%" height="15%" patternUnits="objectBoundingBox">
<rect height="4" width="4" fill="red" />
</pattern>
</defs>
<circle class="fill-pattern-1" cx="150" cy="150" r="55" />
<circle class="fill-pattern-2" cx="300" cy="150" r="55" />
</svg>
</div>
</body>
</html>SVG и свойство fill
Свойство fill делает SVG более гибким, чем стандартные графические файлы. Например, стандартные графические файлы, такие как JPG, GIF или PNG, требуют отдельных версий для разных цветовых схем. С SVG мы можем менять цвета иконок с помощью этого свойства без необходимости в дополнительных файлах. Это можно сделать с помощью кода ниже:
Значения свойства CSS fill
css
.icon {
fill: pink;
}
.icon-secondary {
fill: yellow;
}Значения
| Value | Description |
|---|---|
| color | Указывает цвет фигуры. По умолчанию используется вычисленное значение color элемента. Можно использовать названия цветов, шестнадцатеричные коды, rgb(), rgba(), hsl() и hsla(). Также поддерживаются ссылки url() на узоры или градиенты, определённые в секции <defs>. |
| none | Делает фигуру прозрачной. |
| currentColor | Устанавливает цвет заливки в текущий цвет текста элемента. |
| initial | Заставляет свойство использовать значение по умолчанию. |
| inherit | Наследует свойство от родительского элемента. |
Practice
Какие свойства в SVG-элементах затрагивает свойство CSS 'fill'?