paint-order
Baseline
2024
Nouvellement disponible
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.
La propriété CSS paint-order permet de contrôler l'ordre dans lequel le remplissage, le contour (et les marqueurs de peinture) du contenu textuel et des formes sont dessinés.
Syntaxe
/* Normal */
paint-order: normal;
/* Valeurs uniques */
paint-order: stroke; /* dessiner le contour en premier, puis le remplissage et les marqueurs */
paint-order: markers; /* dessiner les marqueurs en premier, puis le remplissage et le contour */
/* Plusieurs valeurs */
paint-order: stroke fill; /* dessiner le contour en premier, puis le remplissage, puis les marqueurs */
paint-order: markers stroke fill; /* dessiner les marqueurs, puis le contour, puis le remplissage */
/* Valeurs globales */
paint-order: inherit;
paint-order: initial;
paint-order: revert;
paint-order: revert-layer;
paint-order: unset;
Si aucune valeur n'est définie, l'ordre de peinture par défaut est fill, stroke, markers.
Lorsque une seule valeur est définie, celle-ci est peinte en premier, suivie des deux autres dans leur ordre par défaut relatif. Lorsque deux valeurs sont définies, elles sont peintes dans l'ordre spécifié, suivies de la valeur non définie.
Note :
Pour cette propriété, les marqueurs sont uniquement utilisés dans le cas de formes SVG qui utilisent les propriétés marker-* (par exemple, marker-start) ou l'élément SVG <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-
Peint les différents éléments dans l'ordre de peinture normal.
stroke,fill,markers-
Définit certaines ou toutes ces valeurs dans l'ordre dans lequel vous souhaitez 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
Inverser l'ordre de peinture du contour et du remplissage
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200">
<text x="10" y="75">Contour devant</text>
<text x="10" y="150" class="stroke-behind">Contour derrière</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
Inverser l'ordre de peinture du contour et du remplissage en utilisant du HTML
Pour contrôler l'ordre de remplissage et de contour en HTML, vous pouvez utiliser les propriétés CSS -webkit-text-stroke-color et -webkit-text-stroke-width.
HTML
<div>Contour devant</div>
<div class="stroke-behind">Contour derrière</div>
CSS
div {
font-family: sans-serif;
font-size: 50px;
font-weight: bold;
fill: black;
padding-top: 10px;
padding-bottom: 10px;
-webkit-text-stroke-color: red;
-webkit-text-stroke-width: 4px;
}
.stroke-behind {
paint-order: stroke fill;
}
Résultat
Spécifications
| Spécification |
|---|
| Scalable Vector Graphics (SVG) 2 # PaintOrderProperty |