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 by CSS-Tricks (@ css-tricks) на CodePen.
Випадок використання
Поширеним випадком використання fillє зміна кольору SVG при наведенні, подібно до того, як це робиться colorпри стилюванні наведення посилання.
.icon ( fill: black; ) .icon:hover ( fill: orange; )Перегляньте властивість Pen fill by CSS-Tricks (@ css-tricks) на CodePen.
Ще один варіант використання
fillВластивість є одним з багатьох причин SVG є набагато більш гнучким варіантом , ніж звичайні файли зображень. Візьмемо для прикладу ікони.
У нас може бути однаковий набір піктограм, але у двох різних колірних схемах. Типові файли зображень (такі як JPG.webp, PNG та GIF) вимагали б від нас виготовлення двох версій кожного значка - по одному для кожної кольорової схеми.
SVG, навпаки, дозволяє нам писати піктограми під час використання fillвластивості CSS :
.icon ( fill: black; ) .icon-secondary ( fill: orange; )Тепер ми можемо перепрофілювати один і той же файл SVG для декількох сценаріїв, змінивши ім’я класу шляху або фігури:
Перегляньте властивість Pen fill by CSS-Tricks (@ css-tricks) на CodePen.
Більше інформації
- SVG 1.1 Специфікація
- MDN на заливки та обведення
- Каскадний колір заливки SVG
- Шаблони заповнення SVG, Яків Дженков
Підтримка браузера
| Chrome | Сафарі | Firefox | Опера | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Так | Так | Так | Так | 9+ | 4,4+ | Так |