Paint-order - Propriété CSS
Résumé des caractéristiques de la propriété paint-order
normal
| fill
| stroke
| markers
paint-order
passe d'une valeur à l'autre sans transition.Schéma syntaxique de paint-order
.
Description de la propriété paint-order
.
paint-order
définit l'ordre dans lequel sont dessinées les différentes parties d'une forme en SVG.
Cela a de l'importance car ces différentes parties se superposent toujours, au moins partiellement.
Ces différentes parties sont :
fill
: la zone interne de la forme. En bleu clair sur notre exemple ci-dessous.stroke
: le contour de la forme. En bleu foncé.markers
: les repères qui peuvent être ajoutés à chacun des sommets de la forme. En rouge sur l'exemple.
Les marqueurs ne peuvent être ajoutés que aux formes de type path, line, polyline ou polygon,
mais la propriété paint-order
s'applique à toutes les formes, y compris aux textes, pour ce qui est du contour et du remplissage.
paint-order:fill;
Remplissage en dessous
paint-order:stroke;
Contour en dessous
Valeurs pour paint-order
.
- paint-order: normal;
C'est la valeur par défaut. L'ordre de dessin est le suivant :
fill
,stroke
,markers
.
Les marqueurs masquent donc les lignes, qui elles-mêmes masquent la couleur du remplissage.
paint-order: normal;
- paint-order:stroke;
La valeur indiquée est dessinée en premier, en étant éventuellement recouverte pas une autre partie de la forme. Les valeurs non spécifiées sont ensuite dessinées dans l'ordre habituel.
Dans l'exemple ci-dessous, les traits sont recouverts par le remplissage, lui même recouvert par les marqueurs.Les contours dans l'exemple ci-dessous ont bien la même épaisseur que dans l'exemple précédent, mais ils sont à moitié recouverts par la couleur de remplissage, ce qui les fait paraître plus fins.
paint-order: stroke;
- paint-order:markers fill;
Lorsque deux valeurs sont indiquées, les parties correspondantes sont dessinées en premier, dans l'ordre où elles sont indiquées. La partie restante sera dessinée en dernier.
Dans cet exemple, l'ordre de dessin sera donc, en premier les marqueurs, recouverts par le remplissage, lui-même recouvert par les contours.La syntaxe prévoit la possibilité d'indiquer trois valeurs, mais avec deux valeurs seulement l'ordre de dessin est déjà entièrement défini.
paint-order: markers fill;
Valeurs communes à toutes les propriétés :
paint-order: initial ()
paint-order: inherit
paint-order: revert
paint-order: revertLayer
paint-order: unset
Les valeurs communes sont présentées sur ces pages : initial
, inherit
, revert
, revert-layer
, unset
.
Animation de la propriété paint-order
.
L'animation de la propriété paint-order
peut donner quelques effets visuels intéressants.
Les animations peuvent également être définies en SVG, avec la balise animate.
Exemple interactif avec la propriété paint-order
.
Prise en charge par les navigateurs (compatibilité).
Remarques :
(1) N’affecte pas le texte HTML tracé.
paint-order
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Samsung Internet

Safari

Safari sur IOS

Opéra

Firefox

Chrome

Edge

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

KaiOS Browser

Opéra mini
Historique de la propriété paint-order
.
-
SVG (Scalable Vector Graphics)
Introduction de la propriétépaint-order
.28 Août 2012Document de travail.15 Septembre 2016Candidat à la recommandation. -
Module CSS - Traits et remplissages - Niveau 3
Pas de changement concernantpaint-order
.13 Avril 2017Document de travail.
Voir aussi, concernant SVG.
Tout ce qui concerne les remplissages et contours en SVG est maintenant décrit dans le module de spécification CSS Fill and Stroke Module.
Après avoir fait partie de la spécification SVG2, paint-order
est maintenant décrit dans ce module,
ainsi que les propriétés suivantes.
Propriétés :
fill-origin
.