paint-order

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Das paint-order-Attribut legt die Reihenfolge fest, in der die Füllung (fill), der Rahmen (stroke) und die Markierungen (markers) eines bestimmten Shapes oder Textelements gezeichnet werden.

Hinweis: Als Präsentationsattribut hat paint-order auch ein entsprechendes CSS-Property: paint-order. Wenn beide angegeben sind, hat das CSS-Property Vorrang.

Dieses Attribut kann mit den folgenden SVG-Elementen verwendet werden:

Verwendungshinweise

Wert normal | [ fill || stroke || markers ]
Standardwert normal
Animierbar diskret
normal

Dieser Wert gibt an, dass zuerst die Füllung gezeichnet wird, dann der Rahmen und schließlich die Markierungen.

[ fill || stroke || markers ]

Die Reihenfolge dieser drei Schlüsselwörter gibt die Reihenfolge an, in der das Zeichnen geschieht, von links nach rechts. Wenn eine der drei Mal-Komponenten weggelassen wird, werden sie in ihrer Standardreihenfolge nach den angegebenen Komponenten gezeichnet. Zum Beispiel entspricht die Verwendung von stroke dem Wert stroke fill markers.

Beispiel

html
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200">
  <linearGradient id="g" x1="0" y1="0" x2="0" y2="1">
    <stop stop-color="#888" />
    <stop stop-color="#ccc" offset="1" />
  </linearGradient>
  <rect width="400" height="200" fill="url(#g)" />
  <g
    fill="crimson"
    stroke="white"
    stroke-width="6"
    stroke-linejoin="round"
    text-anchor="middle"
    font-family="sans-serif"
    font-size="50px"
    font-weight="bold">
    <text x="200" y="75">stroke over</text>
    <text x="200" y="150" paint-order="stroke" id="stroke-under">
      stroke under
    </text>
  </g>
</svg>

Das Beispiel wird wie folgt dargestellt:

Ein Bild, das zeigt, wie das paint-order-Beispiel in einem Benutzeragent aussieht, der die paint-order-Eigenschaft unterstützt.

Der Effekt "Rahmen unter der Füllung" könnte mit der folgenden CSS-Eigenschaft erreicht werden:

css
#stroke-under {
  paint-order: stroke;
}

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
No support
No support