Ordem de pintura - CSS-Tricks

A paint-orderpropriedade CSS define a ordem em que as formas e o texto SVG são desenhados, incluindo o preenchimento, o traço e quaisquer marcadores que possam estar em uso. Por padrão, esses atributos são desenhados exatamente nessa ordem: preenchimento, traço e marcadores. Esta propriedade nos permite alternar para ter mais controle sobre a aparência resultante.

Essa propriedade realmente se destaca no texto SVG, principalmente em um elemento que possui preenchimento e traço. Como isso:

Ugh, esse golpe é torto. Tem apenas 6 px de largura, mas meio que cobre o preenchimento. Isso ocorre porque o preenchimento é pintado primeiro, por padrão, seguido pelo traço. Mas se invertermos isso usando a paint-orderpropriedade, o preenchimento é pintado por último e cobre as partes feias do traço.

Oh Deus, isso é muito melhor! Podemos realmente ler o texto e o traço é mais fiel à forma dos caracteres do que antes.

Sintaxe

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

Valor inicial: normal
Aplica-se a: formas e elementos de conteúdo de texto
Herdado: sim
Tipo de animação: discreto

Valores

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

É importante notar que é totalmente legítimo passar um valor. Por exemplo, se fizéssemos isso:

paint-order: stroke;

... então o strokeserá pintado primeiro, seguido pelos outros valores em sua ordem padrão. Levando isso em consideração, este exemplo é igual ao seguinte:

Isto significa basicamente que a propriedade seja aceita um valor de normalou uma combinação de fill, strokee markersna ordem em que devem ser pintadas.