The fillharta di CSS adalah untuk mengisi dalam warna bentuk SVG.
.eyeball ( fill: red; )Ingat:
- Ini akan mengatasi atribut persembahan
- Ini tidak akan mengatasi gaya sebaris misalnya
Nilai
Tempat fillpenginapan ini boleh menerima sebarang nilai warna CSS.
- Warna yang dinamakan -
orange - Warna heks -
#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, filljuga menerima corak bentuk SVG yang ditentukan dalam defselemen:
.module ( fill: url(#pattern); )Lihat harta pena Pen oleh CSS-Tricks (@ css-tricks) di CodePen.
Kes Penggunaan
Kes penggunaan yang biasa digunakan filladalah menukar warna SVG pada hover, seperti yang kita lakukan colorketika menggayakan link link.
.icon ( fill: black; ) .icon:hover ( fill: orange; )Lihat harta pena Pen oleh CSS-Tricks (@ css-tricks) di CodePen.
Kes Penggunaan Lain
The fillharta adalah salah satu daripada banyak sebab SVG adalah pilihan yang jauh lebih fleksibel daripada fail imej biasa. Mari kita ambil ikon, sebagai contoh.
Kami mungkin mempunyai set ikon yang sama tetapi dalam dua skema warna yang berbeza. Fail gambar biasa (seperti JPG.webp, PNG dan GIF) memerlukan kami membuat dua versi setiap ikon - satu untuk setiap skema warna.
SVG, sebaliknya, membolehkan kita melukis ikon menggunakan fillharta CSS :
.icon ( fill: black; ) .icon-secondary ( fill: orange; )Sekarang kita dapat menggunakan semula fail SVG yang sama untuk pelbagai senario dengan mengubah nama kelas jalan atau bentuk:
Lihat harta pena Pen oleh CSS-Tricks (@ css-tricks) di CodePen.
Maklumat lanjut
- SVG 1.1 Spesifikasi
- MDN mengenai Isi dan Pukulan
- Warna Isi SVG Cascading
- Corak Isi SVG oleh Jacob Jenkov
Sokongan Penyemak Imbas
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Ya | Ya | Ya | Ya | 9+ | 4.4+ | Ya |