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	Значение элемента наследуется от родительского элемента.