A propriedade CSS paint-order

Definição e uso

paint-order A propriedade especifica a ordem de renderização do elemento SVG ou texto.

Atenção:Para elementos de texto, pode-se mudar apenas a ordem de contorno (stroke) e preenchimento (fill), pois markers não se aplicam.

Mude a ordem de renderização do SVG <circle> elemento:

circle {
  paint-order: stroke fill;
}

Mude a ordem de renderização do SVG <text> elemento com preenchimento de gradiente arco-íris:

text {
  paint-order: stroke fill;
}

paint-order: normal|um valor|dois valores|três valores|initial|inherit;

Valor	Descrição
normal	Valor padrão. A ordem de renderização é preenchimento, contorno, markers.
um valor	A renderização começará pelos valores fornecidos e continuará na ordem padrão para o resto. Se especificado apenas "stroke", a próxima atividade de renderização será preenchimento (fill), seguido por markers.
dois valores	A renderização começará pelos valores fornecidos e continuará na ordem padrão para o resto. Se especificado "stroke markers", a próxima atividade de renderização será preenchimento (fill).
três valores	A renderização será feita conforme os valores fornecidos.
initial	Defina essa propriedade para seu valor padrão. Veja: initial.
inherit	Herda essa propriedade do elemento pai. Veja: inherit.

Valor padrão:	normal
Herança:	sim
Produção de animação:	Não suportado. Veja:Propriedades relacionadas a animação.
Versão:	CSS3
Sintaxe do JavaScript:	object.style.paintOrder="stroke fill"

Os números na tabela representam a versão do navegador que suporta completamente essa propriedade.

Chrome	Edge	Firefox	Safari	Opera
35.0	17.0	60.0	8.0	22.0