Verf bestellen - CSS-trucs | CSS Almanac 2025

De CSS- paint-ordereigenschap stelt de volgorde in waarin SVG-vormen en tekst worden getekend, inclusief de vulling, lijn en eventuele markeringen die in gebruik zijn. Standaard worden die attributen in diezelfde volgorde getekend: vulling, lijn en markeringen. Deze eigenschap stelt ons in staat om het uit te schakelen, zodat we meer controle hebben over het resulterende uiterlijk.

Waar deze eigenschap echt uitblinkt, is met SVG-tekst, met name een element dat zowel een vulling als een lijn heeft. Zoals dit:

Ugh, die slag is knoestig. Het is slechts 6 px breed, maar het bedekt de vulling ongeveer. Dat komt omdat de vulling standaard eerst wordt geverfd, gevolgd door de lijn. Maar als we dat omkeren met behulp van de paint-ordereigenschap, wordt de vulling als laatste geverfd en worden de onooglijke delen van de streek bedekt.

Oh god, dat is zo veel beter! We kunnen de tekst echt lezen en de streek is meer gelijk aan de vorm van de karakters dan voorheen.

Syntaxis

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

Beginwaarde: normal
Geldt voor: vormen en tekstelementen
Overgenomen: ja
Animatietype: discreet

Waarden

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

Het is vermeldenswaard dat het volkomen legitiem is om één waarde door te geven. Als we dit bijvoorbeeld hebben gedaan:

paint-order: stroke;

… Dan strokewordt het eerst geverfd, gevolgd door de andere waarden in hun standaardvolgorde. Hiermee rekening houdend, is dit voorbeeld gelijk aan het volgende:

Dit betekent in feite dat het geaccepteerd ofwel een waarde van normalof een combinatie van fill, strokeen markersin de volgorde waarin zij moeten worden geverfd.