Свойство CSS fill
Свойство CSS fill используется для заливки цветом SVG-фигур. Свойство устарело. Смотрите примеры.
Свойство CSS fill используется для задания цвета заливки внутренней части фигуры SVG. Оно принимает значения цветов, none, currentColor и ссылки через url().
Вы можете найти цвета для веб-страниц с помощью нашего инструмента Color Picker и в разделе HTML colors.
| Начальное значение | currentColor |
|---|---|
| Применяется к | Всем SVG-фигурам, тексту и элементам textPath. |
| Наследуется | Да. |
| Анимируемое | Да. |
| Версия | SVG 1.1 |
| DOM-синтаксис | object.style.fill = "#8ebf42"; |
Синтаксис
Синтаксис свойства CSS fill
fill: color | none | currentColor | url(<id>) | initial | inherit;Пример свойства fill:
<!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":
<!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":
<!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 с паттернами:
<!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
.icon {
fill: pink;
}
.icon-secondary {
fill: yellow;
}Значения
| Значение | Описание |
|---|---|
| color | Указывает цвет фигуры. По умолчанию используется вычисленное значение color элемента. Можно использовать названия цветов, шестнадцатеричные коды, rgb(), rgba(), hsl() и hsla(). Также принимает ссылки через url() на паттерны или градиенты, определённые в разделе <defs>. |
| none | Делает фигуру прозрачной. |
| currentColor | Устанавливает цвет заливки равным текущему цвету текста элемента. |
| initial | Устанавливает для свойства значение по умолчанию. |
| inherit | Наследует свойство от родительского элемента. |