Proprietà CSS paint-order

Definizione e uso

paint-order L'attributo specifica l'ordine di disegno degli elementi SVG o del testo.

Attenzione:Per gli elementi di testo, è possibile modificare l'ordine di contorno (stroke) e riempimento (fill), poiché i marker non si applicano.

Esempio

Esempio 1

Modifica l'ordine di disegno dell'elemento SVG <circle>:

circle {
  paint-order: stroke fill;
}

Prova personalmente

Esempio 2

Modifica l'ordine di disegno dell'elemento SVG <text> con riempimento agradiente arcobaleno:

text {
  paint-order: stroke fill;
}

Prova personalmente

Sintassi CSS

paint-order: normale|uno valore|due valori|tre valori|initial|inherit;

Valore dell'attributo

Valore Descrizione
normale Valore predefinito. L'ordine di disegno è riempimento, contorno, marker.
uno valore

Il disegno inizierà dai valori forniti e continuerà con l'ordine predefinito per il resto.

Se specificato solo "stroke", l'attività di disegno successiva è il riempimento (fill), seguita dai marker.
due valori

Il disegno inizierà dai valori forniti e continuerà con l'ordine predefinito per il resto.

Se specificati "stroke markers", l'attività di disegno successiva sarà il riempimento (fill).
tre valori Il disegno seguirà i valori forniti.
initial Imposta questa proprietà al suo valore predefinito. Vedi initial.
inherit Inherita questa proprietà dal suo elemento padre. Vedi inherit.

Dettagli tecnici

Valore predefinito: normale
Ereditarietà: sì
Produzione di animazioni: Non supportato. Vedi:Proprietà correlate agli animazioni.
Versione: CSS3
Sintassi JavaScript: object.style.paintOrder="stroke fill"

Supporto del browser

I numeri nella tabella rappresentano la versione del browser che supporta completamente l'attributo.

Chrome Edge Firefox Safari Opera
35.0 17.0 60.0 8.0 22.0

pagina relativa

Tutorial:Corso SVG

Tutorial:Grafica HTML SVG