paint-order

Die paint-order CSS Eigenschaft ermöglicht es Ihnen, die Reihenfolge zu steuern, in der die Füllung und die Kontur (sowie die Markierungsmale) 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-Malreihenfolge fill, stroke, markers.

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

Hinweis: Bei dieser Eigenschaft sind Markierungsmale nur dann sinnvoll, 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; in diesem Fall können Sie nur die Reihenfolge von stroke und fill bestimmen.

Werte

normal

Zeichnet die verschiedenen Elemente in der normalen Malreihenfolge.

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 Malreihenfolge von Kontur 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 Malreihenfolge von Kontur und Füllung mit HTML

Um die Füll- und Konturreihenfolge 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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
paint-order

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
Has more compatibility info.

Siehe auch