fillProprietatea în CSS este pentru completarea culorii o formă SVG.
.eyeball ( fill: red; )Tine minte:
- Aceasta va înlocui un atribut de prezentare
- Acest lucru nu va suprascrie un stil inline, de exemplu
Valori
fillProprietatea poate accepta orice valoare de culoare CSS.
- Culori denumite -
orange - Culori hexagonale -
#FF9E2C - Culori RGB și RGBa -
rgb(255, 158, 44)șirgba(255, 158, 44, .5) - Culori HSL și HSLa -
hsl(32, 100%, 59%)șihsla(32, 100%, 59%, .5)
Ca bonus, fillacceptă și modelele formelor SVG definite în interiorul unui defselement:
.module ( fill: url(#pattern); )Consultați proprietatea Pen fill de CSS-Tricks (@ css-tricks) pe CodePen.
Un caz de utilizare
Un caz de utilizare obișnuit pentru aceasta filleste schimbarea culorii unui SVG pe hover, la fel cum facem coloratunci când stilăm linkul pe hover .
.icon ( fill: black; ) .icon:hover ( fill: orange; )Consultați proprietatea Pen fill de CSS-Tricks (@ css-tricks) pe CodePen.
Un alt caz de utilizare
fillProprietatea este una din mai multe motive SVG este o opțiune mult mai flexibilă decât fișierele tipice de imagine. Să luăm ca exemplu icoanele.
S-ar putea să avem același set de icoane, dar în două scheme de culori diferite. Fișierele tipice de imagine (cum ar fi JPG.webp, PNG și GIF) ne-ar impune să realizăm două versiuni ale fiecărei pictograme - una pentru fiecare schemă de culori.
SVG, pe de altă parte, ne permite să pictăm pictogramele folosind fillproprietatea CSS :
.icon ( fill: black; ) .icon-secondary ( fill: orange; )Acum putem reutiliza același fișier SVG pentru mai multe scenarii schimbând numele clasei căii sau formei:
Consultați proprietatea Pen fill de CSS-Tricks (@ css-tricks) pe CodePen.
Mai multe informatii
- SVG 1.1 Spec
- MDN pe umpluturi și accidente vasculare cerebrale
- Culoare de umplere SVG în cascadă
- Modele de umplere SVG de Jacob Jenkov
Suport pentru browser
| Crom | Safari | Firefox | Operă | IE | Android | iOS |
|---|---|---|---|---|---|---|
| da | da | da | da | 9+ | 4.4+ | da |