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.

Ejemplo

Ejemplo 1

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

circle {
  paint-order: stroke fill;
}

Intente hacerlo usted mismo

Ejemplo 2

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

text {
  paint-order: stroke fill;
}

Intente hacerlo usted mismo

Sintaxis de CSS

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

Valor del atributo

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.

Detalles técnicos

Valor predeterminado: normal
Herencia:
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"

Compatibilidad del navegador

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

páginas relacionadas

Tutoriales:Tutoriales de SVG

Tutoriales:Gráficos SVG HTML