Cat-order - Trik CSS

Anonim

paint-orderProperti CSS menyetel urutan bentuk dan teks SVG digambar, termasuk isian, guratan, dan penanda apa pun yang mungkin digunakan. Secara default, atribut tersebut digambar dalam urutan itu: fill, stroke, dan marker. Properti ini memungkinkan kami untuk mengubahnya sehingga kami memiliki kontrol lebih besar atas tampilan yang dihasilkan.

Di mana properti ini benar-benar bersinar adalah dengan teks SVG, khususnya elemen yang memiliki isian dan guratan. Seperti ini:

Ugh, pukulan itu menyebalkan. Ini hanya selebar 6px, tapi itu cukup menutupi isinya. Itu karena isiannya dicat terlebih dahulu, secara default, diikuti oleh goresan. Tetapi jika kita membalikkannya menggunakan paint-orderproperti, isian akan dicat terakhir dan menutupi bagian goresan yang tidak sedap dipandang.

Ya ampun, itu jauh lebih baik! Kami benar-benar dapat membaca teks dan guratannya lebih sesuai dengan bentuk karakter daripada sebelumnya.

Sintaksis

paint-order: normal | ( fill || stroke || markers )
  • Nilai awal: normal
  • Berlaku untuk: bentuk dan elemen konten teks
  • Diwariskan: ya
  • Jenis animasi: diskrit

Nilai

/* Normal */ paint-order: normal; /* Single values */ paint-order: stroke; /* same as: stroke fill markers */ paint-order: markers; /* same as: markers fill stroke */ /* Multiple values */ paint-order: stroke fill; /* same as: stroke fill markers */ paint-order: markers stroke fill;

Perlu dicatat bahwa sangat sah untuk memberikan satu nilai. Misalnya, jika kami melakukan ini:

paint-order: stroke;

… Kemudian strokeakan dicat terlebih dahulu, diikuti oleh nilai lainnya dalam urutan defaultnya. Mempertimbangkan hal itu, contoh ini sama dengan berikut:

Ini pada dasarnya berarti bahwa properti menerima nilai normalatau kombinasi dari fill, strokedan markersdalam urutannya harus dicat.

paint-order: stroke fill markers

Dan apa yang terjadi jika tidak ada nilai atau nilai yang tidak valid diberikan? Urutan default akan digunakan: isi, guratan, penanda.

Dukungan browser

YAITU Tepi Firefox Chrome Safari Opera
Tidak 17+ 60+ 35+ 8+ 22+
Android Chrome Android Firefox Browser Android iOS Safari Opera Mini
85+ 79+ 81+ 8+ Semua
Sumber: caniuse

Bacaan lebih lanjut

  • Spesifikasi Level 2 Scalable Vector Graphics (SVG) (Rekomendasi Kandidat)