Objednávka barvy - Triky CSS

Anonim

Vlastnost CSS paint-ordernastavuje pořadí vykreslování tvarů a textu SVG, včetně výplně, tahu a všech značek, které se mohou používat. Ve výchozím nastavení jsou tyto atributy kresleny v tomto pořadí: výplň, tah a značky. Tato vlastnost nám umožňuje ji přepnout, abychom měli větší kontrolu nad výsledným vzhledem.

Tato vlastnost skutečně svítí s textem SVG, zejména s prvkem, který má výplň i tah. Takhle:

Uf, ten úder je drsný. Je to jen 6px široký, ale to trochu pokrývá výplň. Je to proto, že výplň je namalována nejprve, ve výchozím nastavení, a poté tah. Pokud to ale pomocí paint-ordervlastnosti zvrátíme, výplň se namaluje jako poslední a pokryje nevzhledné části tahu.

Bože, to je mnohem lepší! Můžeme skutečně číst text a tah je věrnější tvaru znaků než dříve.

Syntax

paint-order: normal | ( fill || stroke || markers )
  • Počáteční hodnota: normal
  • Platí pro: tvary a prvky textového obsahu
  • Zděděno: ano
  • Typ animace: diskrétní

Hodnoty

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

Stojí za zmínku, že je naprosto legitimní předat jednu hodnotu. Pokud bychom to udělali například:

paint-order: stroke;

… Poté strokebude namalován nejprve znak a poté další hodnoty v jejich výchozím pořadí. Vezmeme-li to v úvahu, tento příklad se rovná následujícímu:

To v podstatě znamená, že majetek buď akceptuje hodnotu normalnebo kombinace fill, strokea markersv pořadí, v jakém by měla být natřena.

paint-order: stroke fill markers

A co se stane, pokud není zadána žádná hodnota nebo neplatná hodnota? Bude použito výchozí pořadí: výplň, tah, značky.

Podpora prohlížeče

TJ Okraj Firefox Chrome Safari Opera
Ne 17+ 60+ 35+ 8+ 22+
Android Chrome Android Firefox Prohlížeč Android iOS Safari Opera Mini
85+ 79+ 81+ 8+ Všechno
Zdroj: caniuse

Další čtení

  • Scalable Vector Graphics (SVG) Level 2 Specification (Candidate Doporučení)