paint-order
Baseline
2024
Newly available
Since March 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Die paint-order CSS Eigenschaft ermöglicht es Ihnen, die Reihenfolge zu steuern, in der die Füllung, der Rahmen (und das Bemalen von Markern) von Textinhalten und Formen gezeichnet werden.
Syntax
/* Normal */
paint-order: normal;
/* Single values */
paint-order: stroke; /* draw the stroke first, then fill and markers */
paint-order: markers; /* draw the markers first, then fill and stroke */
/* Multiple values */
paint-order: stroke fill; /* draw the stroke first, then the fill, then the markers */
paint-order: markers stroke fill; /* draw markers, then stroke, then fill */
/* Global values */
paint-order: inherit;
paint-order: initial;
paint-order: revert;
paint-order: revert-layer;
paint-order: unset;
Wenn kein Wert angegeben wird, ist die Standard-Malreihenfolge fill, stroke, markers.
Wenn ein Wert angegeben wird, wird dieser zuerst gemalt, gefolgt von den anderen beiden in ihrer Standardreihenfolge zueinander. Bei zwei angegebenen Werten werden diese in der angegebenen Reihenfolge gemalt, gefolgt von dem nicht angegebenen.
Hinweis:
Bei dieser Eigenschaft sind Marker nur geeignet, wenn SVG-Formen unter Verwendung der marker-* Eigenschaften (z.B. marker-start) und des <marker> Elements gezeichnet werden. Sie gelten nicht für HTML-Text, daher können Sie in diesem Fall nur die Reihenfolge von stroke und fill bestimmen.
Werte
normal-
Malen Sie die verschiedenen Elemente in der normalen Malreihenfolge.
stroke,fill,markers-
Geben Sie einige oder alle dieser Werte in der Reihenfolge an, in der sie gemalt werden sollen.
Formale Definition
| Anfangswert | normal |
|---|---|
| Anwendbar auf | Textelemente |
| Vererbt | Ja |
| Berechneter Wert | wie angegeben |
| Animationstyp | diskret |
Formale Syntax
paint-order =
normal |
[ fill || stroke || markers ]
Beispiele
Umkehren der Malreihenfolge von Rahmen und Füllung
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;
}
Ergebnis
Umkehren der Malreihenfolge von Rahmen und Füllung unter Verwendung von HTML
Um die Reihenfolge von Füllung und Rahmen in HTML zu steuern, können Sie die CSS-Eigenschaften -webkit-text-stroke-color und -webkit-text-stroke-width verwenden.
HTML
<div>stroke in front</div>
<div class="stroke-behind">stroke behind</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;
}
Ergebnis
Spezifikationen
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # PaintOrderProperty |