fillСвойство в CSS для заполнения цвета формы SVG.
.eyeball ( fill: red; )Помните:
- Это будет переопределить атрибут представления
- Это не переопределит встроенный стиль, например
Значения
fillСвойство может принимать любое значение CSS цвета.
- Именные цвета -
orange - Цвета шестигранные -
#FF9E2C - Цвета RGB и RGBa -
rgb(255, 158, 44)иrgba(255, 158, 44, .5) - Цвета HSL и HSLa -
hsl(32, 100%, 59%)иhsla(32, 100%, 59%, .5)
В качестве бонуса fillтакже принимает шаблоны фигур SVG, которые определены внутри defsэлемента:
.module ( fill: url(#pattern); )См. Свойство Pen fill от CSS-Tricks (@ css-tricks) на CodePen.
Пример использования
Распространенным вариантом использования fillявляется изменение цвета SVG при наведении курсора, так же, как мы это делаем colorпри стилизации наведения ссылки.
.icon ( fill: black; ) .icon:hover ( fill: orange; )См. Свойство Pen fill от CSS-Tricks (@ css-tricks) на CodePen.
Другой вариант использования
Это fillсвойство является одной из многих причин, по которым SVG является гораздо более гибким вариантом, чем обычные файлы изображений. Возьмем, к примеру, иконки.
У нас может быть один и тот же набор иконок, но в двух разных цветовых схемах. Типичные файлы изображений (например, JPG.webp, PNG и GIF) потребуют от нас создания двух версий каждого значка - по одной для каждой цветовой схемы.
SVG, с другой стороны, позволяет нам раскрашивать значки с помощью fillсвойства CSS :
.icon ( fill: black; ) .icon-secondary ( fill: orange; )Теперь мы можем перепрофилировать один и тот же файл SVG для нескольких сценариев, изменив имя класса пути или формы:
См. Свойство Pen fill от CSS-Tricks (@ css-tricks) на CodePen.
Дополнительная информация
- SVG 1.1 Спецификация
- MDN по заливкам и штрихам
- Каскадный цвет заливки SVG
- Шаблоны заливки SVG от Джейкоба Дженкова
Поддержка браузера
| Хром | Сафари | Fire Fox | Опера | IE | Android | iOS |
|---|---|---|---|---|---|---|
| да | да | да | да | 9+ | 4.4+ | да |