Paint-order - Propriété CSS
Résumé des caractéristiques de la propriété paint-order
normal | fill | stroke | markerspaint-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-orderNavigateurs 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.