Orden de pintura - Trucos CSS | Almanaque CSS 2024

La paint-orderpropiedad CSS establece el orden en que se dibujan las formas y el texto SVG, incluido el relleno, el trazo y los marcadores que puedan estar en uso. De forma predeterminada, esos atributos se dibujan en ese mismo orden: relleno, trazo y marcadores. Esta propiedad nos permite cambiarla para que tengamos más control sobre la apariencia resultante.

Donde esta propiedad realmente brilla es con el texto SVG, particularmente un elemento que tiene un relleno y un trazo. Como esto:

Uf, ese golpe es retorcido. Tiene solo 6px de ancho, pero cubre el relleno. Eso es porque el relleno se pinta primero, por defecto, seguido del trazo. Pero si revertimos eso usando la paint-orderpropiedad, el relleno se pinta al final y cubre las partes antiestéticas del trazo.

¡Oh Dios, eso es mucho mejor! De hecho, podemos leer el texto y el trazo es más fiel a la forma de los caracteres que antes.

Sintaxis

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

Valor inicial: normal
Se aplica a: formas y elementos de contenido de texto
Heredado: si
Tipo de animación: 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;

Vale la pena señalar que es totalmente legítimo pasar un valor. Por ejemplo, si hiciéramos esto:

paint-order: stroke;

... luego strokese pintará primero, seguido de los otros valores en su orden predeterminado. Teniendo eso en cuenta, este ejemplo es igual al siguiente:

Básicamente, esto significa que la propiedad acepta ya sea un valor de normalo una combinación de fill, strokey markersen el orden que debe ser pintado.