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




Похожие статьи