Atributo paint-order de CSS

Definición y uso

paint-order La propiedad especifica el orden de dibujo de los elementos SVG o texto.

Nota:Para los elementos de texto, solo se puede cambiar el orden del contorno (stroke) y el relleno (fill), ya que los marcadores no se aplican.

Cambiar el orden de dibujo del elemento SVG <circle>:

circle {
  paint-order: stroke fill;
}

Cambiar el orden de dibujo del elemento SVG <text> con relleno de degradado arcoíris:

text {
  paint-order: stroke fill;
}

paint-order: normal|uno valor|dos valores|tres valores|initial|inherit;

Valor	Descripción
normal	Valor predeterminado. El orden de dibujo es relleno, contorno, marcadores.
uno valor	El dibujo comenzará con los valores dados y continuará en el orden predeterminado con el resto. Si solo se especifica "stroke", la siguiente actividad de dibujo es el relleno (fill), seguido de los marcadores.
dos valores	El dibujo comenzará con los valores dados y continuará en el orden predeterminado con el resto. Si se especifican "stroke markers", la siguiente actividad de dibujo será el relleno (fill).
tres valores	El dibujo se realizará según los valores dados.
initial	Establezca este atributo en su valor predeterminado. Consulte initial.
inherit	Este atributo se hereda del elemento padre. Consulte inherit.

Valor predeterminado:	normal
Herencia:	sí
Producción de animación:	No se admite. Consulte:Atributos relacionados con la animación.
Versión:	CSS3
Sintaxis de JavaScript:	object.style.paintOrder="stroke fill"

Los números en la tabla representan la versión del navegador que primero fully soportó esta propiedad.

Chrome	Edge	Firefox	Safari	Opera
35.0	17.0	60.0	8.0	22.0