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 Füllung und Umriss (sowie Malmarkierungen) von Textinhalten und Formen gezeichnet werden.

Syntax

css
/* 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-Reihenfolge fill, stroke, markers.

Wenn ein Wert angegeben wird, wird dieser zuerst gezeichnet, gefolgt von den anderen beiden in ihrer Standardreihenfolge zueinander. Wenn zwei Werte angegeben werden, werden diese in der angegebenen Reihenfolge gezeichnet, gefolgt von dem nicht angegebenen.

Hinweis: Im Fall dieser Eigenschaft sind Markierungen nur dann geeignet, wenn SVG-Formen gezeichnet werden, bei denen die Verwendung der marker-* Eigenschaften (z.B. marker-start) und des <marker> Elements erfolgt. 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 normaler Reihenfolge.

stroke, fill, markers

Geben Sie einige oder alle dieser Werte in der gewünschten Reihenfolge an.

Formale Definition

Anfangswertnormal
Anwendbar aufTextelemente
VererbtJa
Berechneter Wertwie angegeben
Animationstypdiskret

Formale Syntax

paint-order = 
  normal                         |
  [ fill || stroke || markers ]

Beispiele

Umkehren der Zeichenreihenfolge von Umriss und Füllung

SVG

html
<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

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 Zeichenreihenfolge von Umriss und Füllung 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

html
<div>stroke in front</div>
<div class="stroke-behind">stroke behind</div>

CSS

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

Siehe auch