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 und der Umriss (sowie Markierungen) 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 ist, ist die Standard-Reihenfolge fill, stroke, markers.
Wenn ein Wert angegeben wird, wird dieser zuerst gezeichnet, gefolgt von den anderen beiden in ihrer Standard-Reihenfolge zueinander. Wenn zwei Werte angegeben sind, werden diese in der Reihenfolge gezeichnet, in der sie angegeben sind, gefolgt von dem nicht angegebenen.
Hinweis: Bei dieser Eigenschaft sind Markierungen nur dann relevant, wenn SVG-Formen gezeichnet werden, die den Gebrauch der marker-* Eigenschaften (z. B. marker-start) und des <marker> Elements beinhalten. Sie gelten nicht für HTML-Text. Daher können Sie in diesem Fall nur die Reihenfolge von stroke und fill bestimmen.
Werte
normal-
Male die verschiedenen Elemente in der normalen Reihenfolge.
stroke,fill,markers-
Geben Sie einige oder alle dieser Werte in der Reihenfolge an, in der Sie bemalt 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
Umkehr der Reihenfolge von stroke und fill
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
Umkehr der Reihenfolge von stroke und fill mit HTML
Um die Füll- und Umrissreihenfolge 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 |
Browser-Kompatibilität
Loading…