fillOmaisuus CSS on täyttöohjeet väriä SVG muodon.
.eyeball ( fill: red; )Muistaa:
- Tämä tulee ohittaa esityksen määrite
- Tämä ei korvaa linjatyyliä esim
Arvot
fillOmaisuus voi hyväksyä CSS väriarvo.
- Nimetyt värit -
orange - Hex värit -
#FF9E2C - RGB- ja RGBa-värit -
rgb(255, 158, 44)jargba(255, 158, 44, .5) - HSL- ja HSLa-värit -
hsl(32, 100%, 59%)jahsla(32, 100%, 59%, .5)
Bonuksena fillhyväksyy myös SVG-muotojen mallit, jotka on määritelty defselementin sisällä :
.module ( fill: url(#pattern); )Katso CSS-Tricksin kynän täyttöominaisuus (@ css-tricks) CodePenistä.
A Käyttötapa
Yleinen käyttötapaus fillon SVG: n värin vaihtaminen leijuvan päällä, aivan kuten me teemme, colorkun muotoilet linkin leijuvia.
.icon ( fill: black; ) .icon:hover ( fill: orange; )Katso CSS-Tricksin kynän täyttöominaisuus (@ css-tricks) CodePenistä.
Toinen käyttötapa
fillOmaisuus on yksi monista syistä SVG on paljon joustavampi vaihtoehto kuin tyypillinen kuvatiedostoja. Otetaan esimerkiksi kuvakkeet.
Meillä voi olla samat kuvakkeet, mutta kahdessa eri värimaailmassa. Tyypilliset kuvatiedostot (kuten JPG.webp, PNG ja GIF) vaativat meitä tekemään jokaisesta kuvakkeesta kaksi versiota - yhden jokaiselle värimallille.
SVG puolestaan antaa meille mahdollisuuden maalata kuvakkeet CSS- fillominaisuuden käytössä:
.icon ( fill: black; ) .icon-secondary ( fill: orange; )Nyt voimme käyttää samaa SVG-tiedostoa useissa tilanteissa muuttamalla polun tai muodon luokan nimeä:
Katso CSS-Tricksin kynän täyttöominaisuus (@ css-tricks) CodePenistä.
Lisää tietoa
- SVG 1.1 Erittely
- MDN täytteistä ja aivohalvauksista
- Porrastettu SVG-täyteväri
- Jacob Jenkovin SVG-täytekuviot
Selaimen tuki
| Kromi | Safari | Firefox | Ooppera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Joo | Joo | Joo | Joo | 9+ | 4.4+ | Joo |