Commande de peinture - Astuces CSS

La paint-orderpropriété CSS définit l'ordre dans lequel les formes et le texte SVG sont dessinés, y compris le remplissage, le contour et tous les marqueurs éventuellement utilisés. Par défaut, ces attributs sont dessinés dans cet ordre précis: remplissage, contour et marqueurs. Cette propriété nous permet de la changer afin que nous ayons plus de contrôle sur l'apparence résultante.

Là où cette propriété brille vraiment, c'est avec le texte SVG, en particulier un élément qui a à la fois un fond et un trait. Comme ça:

Ugh, ce coup est épouvantable. Il ne mesure que 6 pixels de large, mais il couvre en quelque sorte le remplissage. C'est parce que le remplissage est peint en premier, par défaut, suivi du contour. Mais si nous inversons cela en utilisant la paint-orderpropriété, le remplissage est peint en dernier et couvre les parties disgracieuses du trait.

Oh mon Dieu, c'est tellement mieux! On peut lire le texte et le trait est plus fidèle à la forme des caractères qu'auparavant.

Syntaxe

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

Valeur initiale: normal
S'applique à: formes et éléments de contenu de texte
Héritée: oui
Type d'animation: discret

Valeurs

/* 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;

Il convient de noter qu'il est tout à fait légitime de transmettre une valeur. Par exemple, si nous avons fait ceci:

paint-order: stroke;

… Puis le strokesera peint en premier, suivi des autres valeurs dans leur ordre par défaut. Prenant cela en considération, cet exemple est égal à ce qui suit:

Cela signifie essentiellement que la propriété accepte une valeur normalou une combinaison de fill, strokeet markersdans l'ordre dans lequel elles doivent être peintes.