Vopsea-comandă - CSS-Tricks | Almanah CSS 2025

Proprietatea CSS paint-orderstabilește ordinea în care sunt desenate formele și textul SVG, inclusiv umplerea, linia și orice markere care ar putea fi utilizate. În mod implicit, aceste atribute sunt desenate în aceeași ordine: umplere, linie și markeri. Această proprietate ne permite să o schimbăm, astfel încât să avem mai mult control asupra aspectului rezultat.

Unde această proprietate strălucește cu adevărat este cu textul SVG, în special un element care are atât o umplere, cât și o linie. Ca aceasta:

Ugh, acea lovitură este grea. Are o lățime de doar 6 px, dar acoperă în mod obișnuit umplutura. Asta pentru că umplutura este pictată mai întâi, în mod implicit, urmată de linie. Dar dacă inversăm folosirea paint-orderproprietății, umplutura este vopsită ultima și acoperă porțiunile inestetice ale cursei.

Doamne, e mult mai bine! Putem de fapt să citim textul, iar lovitura este mai adevărată decât forma personajelor decât înainte.

Sintaxă

paint-order: normal | ( fill || stroke || markers )

Valoarea initiala: normal
Se aplică: formelor și elementelor de conținut text
Moștenit: da
Tipul de animație: discret

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;

Este demn de remarcat faptul că este absolut legitim să treci o valoare. De exemplu, dacă am făcut acest lucru:

paint-order: stroke;

… Apoi strokeva fi pictat primul, urmat de celelalte valori în ordinea lor implicită. Luând în considerare acest lucru, acest exemplu este egal cu următorul:

Aceasta înseamnă, în principiu, că proprietatea acceptă fie o valoare, normalfie o combinație a acesteia fill, strokeși markersîn ordinea în care ar trebui să fie vopsite.