Boya siparişi - CSS Hileleri

Anonim

CSS paint-orderözelliği, dolgu, kontur ve kullanımda olabilecek işaretçiler dahil olmak üzere SVG şekillerinin ve metninin çizilme sırasını ayarlar. Varsayılan olarak, bu nitelikler tam da şu sırayla çizilir: dolgu, kontur ve işaretçiler. Bu özellik, onu değiştirmemize izin verir, böylece ortaya çıkan görünüm üzerinde daha fazla kontrole sahip oluruz.

Bu özelliğin gerçekten parladığı yer, SVG metninde, özellikle hem dolgu hem de kontura sahip bir öğedir. Böyle:

Ugh, bu felç garip. Sadece 6 piksel genişliğinde, ancak dolguyu kaplıyor. Bunun nedeni, önce dolgunun varsayılan olarak boyanması ve ardından konturun boyanmasıdır. Ancak paint-orderözelliği kullanarak bunu tersine çevirirsek , dolgu en son boyanır ve konturun çirkin kısımlarını kaplar.

Tanrım, bu çok daha iyi! Metni gerçekten okuyabiliriz ve kontur, karakterlerin şekli için öncekinden daha doğrudur.

Sözdizimi

paint-order: normal | ( fill || stroke || markers )
  • Başlangıç ​​değeri: normal
  • Şunlar için geçerlidir: şekiller ve metin içeriği öğeleri
  • Devralındı: evet
  • Animasyon türü: ayrık

Değerler

/* 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;

Bir değeri geçmenin tamamen yasal olduğunu belirtmekte fayda var. Örneğin, bunu yaptıysak:

paint-order: stroke;

… Sonra strokeönce boyanacak, ardından diğer değerler varsayılan sırasına göre boyanacaktır. Bunu dikkate aldığımızda, bu örnek şuna eşittir:

Bu, temel olarak tesis ya da bir değer kabul anlamına gelir normalya da bir arada fill, strokeve markerssırayla da boyanmış olmalıdır.

paint-order: stroke fill markers

Ve hiçbir değer veya geçersiz bir değer sağlanmazsa ne olur? Varsayılan sıra kullanılacaktır: dolgu, kontur, işaretçiler.

Tarayıcı desteği

IE Kenar Firefox Krom Safari Opera
Hayır 17+ 60+ 35+ 8+ 22+
Android Chrome Android Firefox Android Tarayıcı iOS Safari Opera Mini
85+ 79+ 81+ 8+ Herşey
Kaynak: caniuse

daha fazla okuma

  • Ölçeklenebilir Vektör Grafikleri (SVG) Düzey 2 Spesifikasyonu (Aday Öneri)