Festékrendelés - CSS-trükkök

A CSS paint-ordertulajdonság beállítja az SVG alakzatok és szöveg rajzolásának sorrendjét, beleértve a kitöltést, a körvonalat és az esetlegesen használt jelölőket. Alapértelmezés szerint ezeket az attribútumokat éppen ebben a sorrendben rajzolják ki: kitöltés, körvonal és jelölők. Ez a tulajdonság lehetővé teszi számunkra a váltást, így jobban szabályozhatjuk a megjelenést.

Ahol ez a tulajdonság valóban ragyog, az az SVG szöveg, különösen egy elem, amely kitöltéssel és vonallal is rendelkezik. Mint ez:

Ugh, ez a stroke gnar. Csak 6 képpont széles, de sorta borítja a kitöltést. Ez azért van, mert alapértelmezés szerint először a kitöltést festik, majd a körvonalat követi. De ha ezt megfordítjuk a paint-ordertulajdonság használatával, akkor a kitöltést utoljára festjük ki, és eltakarja az ütés csúnya részeit.

Ó, istenem, ez sokkal jobb! Valójában elolvashatjuk a szöveget, és a vonás igazabb a karakterek alakjában, mint korábban.

Szintaxis

paint-order: normal | ( fill || stroke || markers )

Kezdő érték: normal
A következőkre vonatkozik: alakzatok és szöveges tartalmi elemek
Örökölt: igen
Animáció típusa: diszkrét

Értékek

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

Érdemes megjegyezni, hogy teljesen jogos egy érték átadása. Például, ha ezt tettük:

paint-order: stroke;

... majd strokeelőször a festék kerül festésre, majd a többi érték az alapértelmezett sorrendben következik. Ezt figyelembe véve ez a példa megegyezik a következőkkel:

Ez alapvetően azt jelenti, hogy a tulajdonság vagy elfogad egy értéket, normalvagy ezek kombinációját fill, strokeés markersabban a sorrendben, ahogyan festeni kell.