Кратко
Секция статьи "Кратко"CSS-свойство fill
, как и у одноимённого SVG-атрибута, используется для оформления цвета заливки SVG-элемента. По умолчанию — black
.
Пример
Секция статьи "Пример".eye { fill: blue;}
.eye { fill: blue; }
Как пишется
Секция статьи "Как пишется"Свойство соответствует SVG-атрибуту fill
и содержит обозначение цвета.
Помимо стандартных форматов: именованного цвета (orange
, rebeccapurple
и др.), RGB(A), HEX и HSL(A), fill
поддерживает формат ссылки на SVG-элемент, который будет как паттерн заполнять площадь элемента:
.pacman { fill: url(#pattern);}
.pacman { fill: url(#pattern); }
Подсказки
Секция статьи "Подсказки"💡 Через CSS-свойство можно управлять цветом заливки SVG-элементов с помощью других возможностей CSS, например, при наведении курсора:
.pacman { fill: url(#pattern);}.pacman:hover { fill: yellow;}
.pacman { fill: url(#pattern); } .pacman:hover { fill: yellow; }
На практике
Секция статьи "На практике"советует Секция статьи "Realetive советует"
🛠 CSS-свойство fill
влияет на цвет заливки только при вставке всего SVG-кода непосредственно в HTML — SVG-изображение, вставленное через SVG-шрифт, <img>
/ <object>
или background
/ background
не «увидит» его.