CSS'deki fillözellik, bir SVG şeklinin rengini doldurmak içindir.
.eyeball ( fill: red; )Hatırlamak:
- Bu , bir sunum özelliğini geçersiz kılar
- Bu , satır içi stili geçersiz kılmaz, örneğin
Değerler
fillMülkiyet herhangi bir CSS renk değeri kabul edebilir.
- Adlandırılmış renkler -
orange - Onaltılık renkler -
#FF9E2C - RGB ve RGBa renkleri -
rgb(255, 158, 44)vergba(255, 158, 44, .5) - HSL ve HSLa renkleri -
hsl(32, 100%, 59%)vehsla(32, 100%, 59%, .5)
Bonus olarak, fillbir defsöğenin içinde tanımlanan SVG şekillerinin kalıplarını da kabul eder :
.module ( fill: url(#pattern); )CodePen'de CSS-Tricks (@ css-tricks) tarafından Kalem doldurma özelliğine bakın.
Bir Kullanım Örneği
Yaygın bir kullanım durumu için fillBizimle ilgisi çok gibi, vurgulu bir SVG rengini değiştirerek olan colorbağlantı fareyi üzerine stil zaman.
.icon ( fill: black; ) .icon:hover ( fill: orange; )CodePen'de CSS-Tricks (@ css-tricks) tarafından Kalem doldurma özelliğine bakın.
Başka Bir Kullanım Örneği
Bu fillözellik, SVG'nin tipik görüntü dosyalarından çok daha esnek bir seçenek olmasının birçok nedeninden biridir. Örnek olarak simgeleri alalım.
Aynı simge kümesine sahip olabiliriz, ancak iki farklı renk şeması olabilir. Tipik görüntü dosyaları (JPG.webp, PNG ve GIF gibi), her bir simgenin her bir renk şeması için bir tane olmak üzere iki versiyonunu yapmamızı gerektirir.
Öte yandan SVG, CSS fillözelliğini kullanırken simgeleri boyamamıza izin verir :
.icon ( fill: black; ) .icon-secondary ( fill: orange; )Artık yolun veya şeklin sınıf adını değiştirerek aynı SVG dosyasını birden çok senaryo için yeniden kullanabiliriz:
CodePen'de CSS-Tricks (@ css-tricks) tarafından Kalem doldurma özelliğine bakın.
Daha fazla bilgi
- SVG 1.1 Özellikleri
- Dolgular ve Konturlarda MDN
- Basamaklı SVG Dolgu Rengi
- Jacob Jenkov'dan SVG Dolgu Kalıpları
Tarayıcı Desteği
| Krom | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Evet | Evet | Evet | Evet | 9+ | 4.4+ | Evet |