paint-order
Baseline
2024
Newly 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'une technologie expérimentale.
Vérifiez attentivement le tableau 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, sera fill, 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és marker-* (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 entre stroke et fill importe.
Valeurs
normal-
Les différents niveaux sont appliqués dans l'ordre normal.
strokefillmarkers-
Indiquent 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 spécifié |
| 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" class="stroke-behind">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 |