Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
paint-order
Baseline 2024Newly available
Depuis March 2024, cette fonctionnalité fonctionne sur les appareils et les versions de navigateur les plus récents. Elle peut ne pas fonctionner sur les appareils ou navigateurs plus anciens.
Expérimental:Il s'agit d'unetechnologie expérimentale.
Vérifiez attentivement letableau de compatibilité des navigateurs avant de l'utiliser en production.
La propriétépaint-order permet de contrôler l'ordre dans lequel le remplissage, les marqueurs de peinture et le contour du texte et des formes sont dessinés.
Syntaxe
/* Normal */paint-order: normal;/* Valeur unique *//* le contour est dessiné en premier, puis *//* le remplissage puis les marqueurs */paint-order: stroke;/* les marqueurs sont dessinés en premier, *//* suivis du remplissage et du contour */paint-order: markers;/* Plusieurs valeurs *//* Le contour est dessiné en premier puis *//* le remplissage puis les marqueurs */paint-order: stroke fill;/* Les marqueurs sont dessinés en premiers *//* puis le contour, puis le remplissage */paint-order: markers stroke fill;La valeur par défaut, utilisée si aucune valeur n'est fournie, serafill,stroke,markers.
Lorsqu'une seule valeur est indiquée, c'est celle-ci qui est appliquée par défaut suivi des deux autres selon l'ordre par défaut. Lorsque deux valeurs sont indiquées, elles sont appliquées dans cet ordre puis suivi de la troisième.
Note :Pour cette propriété, les marqueurs sont uniquement utilisés dans le cas de formes SVG qui utilisent les propriétésmarker-* (e.g.marker-start) ou l'élément<marker>. Les marqueurs ne sont pas appliqués sur le texte HTML, dans ce cas, seul l'ordre entrestroke etfill importe.
Valeurs
normalLes différents niveaux sont appliqués dans l'ordre normal.
strokefillmarkersIndiquent les valeurs dans l'ordre dans lequel on veut qu'elles soient peintes.
Définition formelle
| Valeur initiale | normal |
|---|---|
| Applicabilité | éléments textes |
| Héritée | oui |
| Valeur calculée | comme défini |
| Type d'animation | discrète |
Syntaxe formelle
paint-order =
normal|
[fill||stroke||markers]
Exemples
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200"> <text x="10" y="75">stroke in front</text> <text x="10" y="150">stroke behind</text></svg>CSS
text { font-family: sans-serif; font-size: 50px; font-weight: bold; fill: black; stroke: red; stroke-width: 4px;}.stroke-behind { paint-order: stroke fill;}Résultat
Spécifications
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # PaintOrderProperty |