fillCSS turtas yra pildymo tam SVG formos spalvos.
.eyeball ( fill: red; )Prisiminti:
- Tai bus nepaisyti pristatymas atributą
- Tai nebus nepaisyti inline stiliaus pvz
Vertybės
fillTurtas gali priimti bet kokį CSS spalvų reikšmę.
- Pavadintos spalvos -
orange - Šešiakampės spalvos -
#FF9E2C - RGB ir RGBa spalvos -
rgb(255, 158, 44)irrgba(255, 158, 44, .5) - HSL ir HSLa spalvos -
hsl(32, 100%, 59%)irhsla(32, 100%, 59%, .5)
Kaip premiją filltaip pat priima SVG figūrų modelius, apibrėžtus defselemento viduje :
.module ( fill: url(#pattern); )„CodePen“ peržiūrėkite CSS-Tricks (@ css-tricks) „Pen fill“ ypatybę.
A naudojimo atvejis
Įprastas naudojimo atvejis fillyra svyruojančios SVG spalvos keitimas, panašiai kaip mes darome, colorkai formuojamos nuorodos.
.icon ( fill: black; ) .icon:hover ( fill: orange; )„CodePen“ peržiūrėkite CSS-Tricks (@ css-tricks) „Pen fill“ ypatybę.
Kitas naudojimo atvejis
fillNuosavybė yra viena iš daugelio priežasčių, SVG yra daug lankstesnis variantas nei tipiškų vaizdų failus. Kaip pavyzdį paimkime piktogramas.
Galime turėti tą patį piktogramų rinkinį, bet dviem skirtingomis spalvų schemomis. Įprastiems vaizdų failams (pvz., JPG.webp, PNG ir GIF) mums reikės dviejų kiekvienos piktogramos versijų - po vieną kiekvienai spalvų schemai.
Kita vertus, SVG leidžia mums nupiešti piktogramas naudojant CSS fillypatybę:
.icon ( fill: black; ) .icon-secondary ( fill: orange; )Dabar tą patį SVG failą galime pritaikyti keliems scenarijams, pakeisdami kelio ar formos klasės pavadinimą:
„CodePen“ peržiūrėkite CSS-Tricks (@ css-tricks) „Pen fill“ ypatybę.
Daugiau informacijos
- SVG 1.1 Spec
- MDN apie užpildymus ir smūgius
- Kaskadinė SVG užpildo spalva
- Jacobo Jenkovo SVG užpildymo modeliai
Naršyklės palaikymas
| „Chrome“ | „Safari“ | „Firefox“ | Opera | T.Y | „Android“ | „iOS“ |
|---|---|---|---|---|---|---|
| Taip | Taip | Taip | Taip | 9+ | 4.4+ | Taip |