Ordine di verniciatura - Trucchi CSS

Anonim

La paint-orderproprietà CSS imposta l'ordine in cui vengono disegnate le forme SVG e il testo, inclusi il riempimento, il tratto e qualsiasi indicatore che potrebbe essere in uso. Per impostazione predefinita, questi attributi vengono disegnati in quell'ordine: riempimento, tratto e indicatori. Questa proprietà ci consente di attivarla in modo da avere un maggiore controllo sull'aspetto risultante.

Dove questa proprietà brilla davvero è con il testo SVG, in particolare un elemento che ha sia un riempimento che un tratto. Come questo:

Ugh, quel colpo è nodoso. È largo solo 6 px, ma in qualche modo copre il riempimento. Questo perché il riempimento viene disegnato per primo, per impostazione predefinita, seguito dal tratto. Ma se lo invertiamo usando la paint-orderproprietà, il riempimento viene dipinto per ultimo e copre le parti antiestetiche del tratto.

Oh dio, è molto meglio! Possiamo effettivamente leggere il testo e il tratto è più fedele alla forma dei caratteri rispetto a prima.

Sintassi

paint-order: normal | ( fill || stroke || markers )
  • Valore iniziale: normal
  • Si applica a: forme ed elementi di contenuto di testo
  • Ereditato: sì
  • Tipo di animazione: discreta

Valori

/* 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 notare che è totalmente legittimo passare un valore. Ad esempio, se lo facessimo:

paint-order: stroke;

... quindi strokeverrà dipinto per primo, seguito dagli altri valori nell'ordine predefinito. Tenendo conto di ciò, questo esempio è uguale al seguente:

Ciò significa che la proprietà accetta sia un valore normalo una combinazione di fill, strokee markersnell'ordine in cui dovrebbe essere dipinto.

paint-order: stroke fill markers

E cosa succede se non viene fornito alcun valore o uno non valido? Verrà utilizzato l'ordine predefinito: riempimento, tratto, marcatori.

Supporto del browser

IE Bordo Firefox Cromo Safari musica lirica
No 17+ 60+ 35+ 8+ 22+
Android Chrome Android Firefox Browser Android iOS Safari Opera Mini
85+ 79+ 81+ 8+ Tutti
Fonte: caniuse

Ulteriore lettura

  • Specifica di livello 2 per grafica vettoriale scalabile (SVG) (raccomandazione del candidato)