The fillproperti di CSS adalah untuk mengisi warna bentuk SVG.
.eyeball ( fill: red; )Ingat:
- Ini akan menggantikan atribut presentasi
- Ini tidak akan menimpa gaya sebaris misalnya
Nilai
The fillproperti dapat menerima nilai warna CSS.
- Warna bernama -
orange - Warna hex -
#FF9E2C - Warna RGB dan RGBa -
rgb(255, 158, 44)danrgba(255, 158, 44, .5) - Warna HSL dan HSLa -
hsl(32, 100%, 59%)danhsla(32, 100%, 59%, .5)
Sebagai bonus, fillterima juga pola bentuk SVG yang ditentukan di dalam defselemen:
.module ( fill: url(#pattern); )Lihat properti Pen fill dengan CSS-Tricks (@ css-trick) di CodePen.
Kasus Penggunaan
Kasus penggunaan umum untuk filladalah mengubah warna SVG saat mengarahkan kursor, seperti yang kita lakukan dengan colorsaat gaya tautan melayang.
.icon ( fill: black; ) .icon:hover ( fill: orange; )Lihat properti Pen fill dengan CSS-Tricks (@ css-trick) di CodePen.
Kasus Penggunaan Lain
The fillproperti adalah salah satu dari banyak alasan SVG adalah pilihan yang jauh lebih fleksibel daripada file gambar khas. Mari kita ambil ikon, sebagai contoh.
Kami mungkin memiliki kumpulan ikon yang sama tetapi dalam dua skema warna yang berbeda. File gambar tipikal (seperti JPG.webp, PNG dan GIF) mengharuskan kita membuat dua versi untuk setiap ikon - satu untuk setiap skema warna.
SVG, di sisi lain, memungkinkan kita melukis ikon dalam menggunakan fillproperti CSS :
.icon ( fill: black; ) .icon-secondary ( fill: orange; )Sekarang kita dapat menggunakan kembali file SVG yang sama untuk beberapa skenario dengan mengubah nama kelas dari jalur atau bentuk:
Lihat properti Pen fill dengan CSS-Tricks (@ css-trick) di CodePen.
Informasi Lebih Lanjut
- Spesifikasi SVG 1.1
- MDN tentang Fills and Strokes
- Warna Isi SVG Bertingkat
- Pola Pengisian SVG oleh Jacob Jenkov
Dukungan Browser
| Chrome | Safari | Firefox | Opera | YAITU | Android | iOS |
|---|---|---|---|---|---|---|
| Iya | Iya | Iya | Iya | 9+ | 4.4+ | Iya |