CSS свойство fill

Свойство fill заполняет каким-либо цветом SVG-форму. Оно может иметь любое значение из CSS свойства color.

Можете выбрать цвет при помощи нашего инструмента Color Picker, а также в разделе HTML colors.

Значение по умолчанию black
Применяется Ко всем элементам, а также к ::first-letter и ::first-line.
Наследуется Да
Анимируемое Да
Версия SVG 1.1
DOM Syntax object.style.Fill = "#8ebf42";

Синтаксис

fill: color | initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      circle {
      fill: #1c87c9;
      }
    </style>
  </head>
  <body>
    <svg viewBox="0 0 100 100">
      <circle cx="50" cy="50" r="50"/>
    </svg>
  </body>
</html>

Значения

Значение Описание
color Указывает цвет формы. Текущий цвет элемента является значением по умолчанию. Могут быть использованы названия цветов, цветовые коды hexadecimal, rgb(), rgba(), hsl(), hsla(). Свойство fill также принимает паттерны SVG-форм, указанные внутри элемента defs.
initial Устанавливает свойство в значение по умолчанию.
inherit Значение элемента наследуется от родительского элемента.

Поддержка браузера

chrome edge firefox safari opera
? ? ? ? ?

Практикуйте свои знания

What is the correct usage of the 'fill' property in CSS?
Считаете ли это полезным?