Narudžba boje - CSS-trikovi

Anonim

paint-orderSvojstvo CSS postavlja redoslijed crtanja SVG oblika i teksta, uključujući ispunu, potez i sve markere koji bi se mogli koristiti. Prema zadanim postavkama ti se atributi crtaju upravo tim redoslijedom: ispunjavanje, crtanje i oznake. Ovo svojstvo omogućuje nam da ga prebacimo, tako da imamo veću kontrolu nad rezultirajućim izgledom.

Ovo svojstvo uistinu sjaji sa SVG tekstom, posebno elementom koji ima i ispunu i potez. Kao ovo:

Uf, taj je udar možda grozan. Širina je samo 6 piksela, ali nekako pokriva ispunu. To je zato što je ispuna prvo obojena, prema zadanim postavkama, a nakon toga potez. Ali ako to promijenimo koristeći paint-ordersvojstvo, ispuna se posljednje oboji i prekriva neugledne dijelove poteza.

O, bože, to je tako bolje! Zapravo možemo čitati tekst i potez je istinitiji prema obliku likova nego prije.

Sintaksa

paint-order: normal | ( fill || stroke || markers )
  • Početna vrijednost: normal
  • Odnosi se na: oblike i elemente sadržaja teksta
  • Naslijeđeno: da
  • Vrsta animacije: diskretna

Vrijednosti

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

Vrijedno je napomenuti da je potpuno opravdano prenijeti jednu vrijednost. Na primjer, ako smo to učinili:

paint-order: stroke;

... tada strokeće se prvo slikati, a zatim ostale vrijednosti prema zadanom redoslijedu. Uzimajući to u obzir, ovaj je primjer jednak sljedećem:

To u osnovi znači da je imovina ili prihvaća vrijednost normalili kombinaciju fill, strokea markerspo redoslijedu trebaju biti obojeni.

paint-order: stroke fill markers

A što će se dogoditi ako ne navedete vrijednost ili nevaljanu vrijednost? Upotrijebit će se zadani redoslijed: ispuna, potez, oznake.

Podrška preglednika

IE Rub Firefox Krom Safari Opera
Ne 17+ 60+ 35+ 8+ 22+
Android Chrome Android Firefox Android preglednik iOS Safari Opera Mini
85+ 79+ 81+ 8+ svi
Izvor: caniuse

Daljnje čitanje

  • Specificiranost skalabilne vektorske grafike (SVG) razine 2 (preporuka kandidata)