Maling-rækkefølge - CSS-tricks

CSS- paint-orderegenskaben indstiller den rækkefølge, som SVG-figurer og tekst tegnes, inklusive udfyldning, streg og eventuelle markører, der måtte være i brug. Som standard er disse attributter tegnet i netop den rækkefølge: fyld, streg og markører. Denne egenskab giver os mulighed for at tænde den, så vi har mere kontrol over det resulterende udseende.

Hvor denne egenskab virkelig skinner, er med SVG-tekst, især et element, der både har en udfyldning og et streg. Sådan her:

Ugh, det slagtilfælde er knasende. Det er kun 6 px bredt, men det dækker sort fyldet. Det er fordi fyldet males først som standard efterfulgt af streg. Men hvis vi vender om ved at bruge paint-orderejendommen, males udfyldningen sidst og dækker de grimme dele af streg.

Åh, det er så meget bedre! Vi kan faktisk læse teksten, og stregen er mere sand i forhold til figurernes form end før.

Syntaks

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

Startværdi: normal
Gælder for: figurer og tekstindholdselementer
Arvet: ja
Animationstype: diskret

Værdier

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

Det er værd at bemærke, at det er helt legitimt at give en værdi. For eksempel, hvis vi gjorde dette:

paint-order: stroke;

... så strokemales den først efterfulgt af de andre værdier i deres standardrækkefølge. Under hensyntagen til dette er dette eksempel lig med følgende:

Dette betyder grundlæggende, at ejendommen enten accepterer en værdi af normaleller en kombination af fill, strokeog markersi den rækkefølge, de skal males.