Paint-order - Propriété CSS

paint-order

Résumé des caractéristiques de la propriété paint-order

Description rapide
Définit l'ordre de dessin des différentes parties d'une forme (contour, remplissage, marqueurs).
Statut
Standard
Utilisable sur
SVG
Valeurs prédéfinies
normal | fill | stroke | markers
Pourcentages
Ne s'appliquent pas.
Héritée par défaut
Oui.
Type d'animation
Discrète : lors d'une animation, la propriété paint-order passe d'une valeur à l'autre sans transition.
Module W3C
Module CSS - Traits et remplissages
Références (W3C)
 🡇  
 🡅  
Statut du document: WD (document de travail)

Statut du document: CR (document candidat à la recommandation)

Schéma syntaxique de paint-order.

paint-order - Syntax DiagramSyntax diagram of the paint-order CSS property. See stylescss.free.fr for details. normal normal fill fill stroke stroke markers markers {1,3} {1,3}paint-order:;paint-order:;
Schéma syntaxique de la propriété paint-order
Description des valeurs

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.

Texte
paint-order:fill;
Remplissage en dessous
Texte
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.

paint-order :

Prise en charge par les navigateurs (compatibilité).

Remarques :

(1) N’affecte pas le texte HTML tracé.

1
Propriété
paint-order
Estimation de la prise en charge globale.
91%

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.

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
Définit l'ensemble des paramètres de remplissage d'une forme (couleur, etc).
fill-break
Définit comment le navigateur gère les ruptures dans cet élément (saut de page par exemple).
fill-color
Définit la couleur des remplissages en SVG.
fill-image
Définit la ou les images de remplissage. Cela peut être aussi des dégradés de couleur.
fill-opacity
Définit l'opcaité (la transparence) du remplissage d'une forme en SVG.
fill-origin
Définit la boîte qui sert de référence pour le positionnement des remplissages (images ou dégradés).
fill-position
Définit la position du remplissage, en accord avec la propriété fill-origin.
fill-repeat
Détermine comment est répétée l'image de remplissage dans une forme SVG.
fill-rule
Définit comment doit se faire le remplissage d'une forme comportant un trou, ou dont le contour se recoupe lui-même.
fill-size
Détermine les dimensions de l'image o du dégradé de remplissage sur une forme SVG.
stroke
Définit les paramètres de la bordure d'une forme en SVG.
stroke-align
Définit comment se positionne le trait de bordure par rapport aux limites de la forme, en SVG.
stroke-break
Définit comment sont coupées les bordures dans le cas d'une fragmentation.
stroke-color
Définit la couleur des contours en SVG.
stroke-dash-corner
Définit comment gérer les pointillés dans les angles du contour (SVG).
stroke-dash-justify
Définit l'ajustement des pointillés pour qu'un nombnre entier de segments soit compris dans le tracé (SVG).
stroke-dasharray
Définit les caractéristiques d'un pointillé (en SVG).
stroke-dashoffset
Définit le point de départ des pointillés sur un contour SVG.
stroke-linecap
Définit la forme des embouts de lignes (en SVG).
stroke-linejoin
Définit la forme des raccordements de segments en SVG.
stroke-miterlimit
Limite le dépassement des raccordements de segments avec un angle aigu.
stroke-opacity
Définit l'opacité (la transparence) du contour en SVG.
stroke-width
Définit l'épaisseur des tracés en SVG.