Färgbeställning - CSS-tricks

CSS- paint-orderegenskapen anger den ordning som SVG-former och text ska ritas, inklusive fyllning, stroke och eventuella markörer som kan användas. Som standard ritas dessa attribut i samma ordning: fyllning, stroke och markörer. Den här egenskapen låter oss byta upp den så att vi har mer kontroll över det resulterande utseendet.

Där den här egenskapen verkligen lyser är med SVG-text, särskilt ett element som har både en fyllning och en stroke. Så här:

Ugh, den stroke är knarrig. Den är bara 6 pixlar bred, men den täcker fyllningen. Det beror på att fyllningen målas först som standard, följt av stroke. Men om vi vänder om att använda paint-orderegenskapen, fylls fyllningen sist och täcker de fula delarna av stroke.

Åh goss, det är så mycket bättre! Vi kan faktiskt läsa texten och strecket är riktigare mot karaktärernas form än tidigare.

Syntax

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

Ursprungligt värde: normal
Gäller för: former och textinnehållselement
Ärvt: ja
Animationstyp: diskret

Värden

/* 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 är värt att notera att det är helt legitimt att skicka ett värde. Till exempel om vi gjorde det här:

paint-order: stroke;

... sedan strokemålas den först, följt av de andra värdena i standardordning. Med hänsyn till detta är detta exempel lika med följande:

Detta innebär i grunden att fastigheten antingen accepterar ett värde på normaleller en kombination av fill, strokeoch markersi den ordning de ska målas.