fillИмовина у ЦСС је за пуњење у боји облику СВГ.
.eyeball ( fill: red; )Запамтити:
- Ово ће заменити атрибут презентације
- Ово неће заменити уграђени стил, нпр
Вредности
fillИмовина може прихватити било коју вредност ЦСС боје.
- Именоване боје -
orange - Хек боје -
#FF9E2C - РГБ и РГБа боје -
rgb(255, 158, 44)иrgba(255, 158, 44, .5) - ХСЛ и ХСЛа боје -
hsl(32, 100%, 59%)иhsla(32, 100%, 59%, .5)
Као бонус, fillтакође прихвата обрасце СВГ облика који су дефинисани унутар defsелемента:
.module ( fill: url(#pattern); )Погледајте својство Пен филл би ЦСС-Трицкс (@ цсс-трицкс) на ЦодеПен-у.
Случај употребе
Уобичајени случај примене fillје промена боје СВГ-а при лебдењу, слично као што то чинимо код colorобликовања лебдећег линка.
.icon ( fill: black; ) .icon:hover ( fill: orange; )Погледајте својство Пен филл би ЦСС-Трицкс (@ цсс-трицкс) на ЦодеПен-у.
Још један случај употребе
fillИмовина је један од многих разлога СВГ је много флексибилнији опција него фајлове типична слика. Узмимо за пример иконе.
Можда имамо исти сет икона, али у две различите шеме боја. Типичне сликовне датотеке (као што су ЈПГ, ПНГ и ГИФ) захтевале би да направимо две верзије сваке иконе - по једну за сваку шему боја.
СВГ, с друге стране, омогућава нам да сликамо иконе у коришћењу fillсвојства ЦСС :
.icon ( fill: black; ) .icon-secondary ( fill: orange; )Сада можемо преусмерити исту СВГ датотеку за више сценарија променом имена класе путање или облика:
Погледајте својство Пен филл би ЦСС-Трицкс (@ цсс-трицкс) на ЦодеПен-у.
Више информација
- СВГ 1.1 Спец
- МДН о испунама и потезима
- Каскадна СВГ боја испуне
- Обрасци за попуњавање СВГ, Јацоб Јенков
Подршка прегледача
| Хром | Сафари | Фирефок | Опера | ИЕ | Андроид | иОС |
|---|---|---|---|---|---|---|
| да | да | да | да | 9+ | 4.4+ | да |