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 gibt an, in welcher Reihenfolge die Füllung, die Kontur und die Markierungen eines bestimmten Form- oder Textelements gezeichnet werden.

Hinweis: Als Präsentationsattribut kann paint-order auch als CSS-Eigenschaft verwendet werden.

Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:

Anwendungshinweise

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

normal: Dieser Wert gibt an, dass zuerst die Füllung, dann die Kontur und schließlich die Markierungen gezeichnet werden.
[ fill || stroke || markers ]: Die Reihenfolge dieser drei Schlüsselwörter gibt die Reihenfolge an, in der die Zeichnung erfolgt, von links nach rechts. Wenn einer der drei Zeichnungskomponenten weggelassen wird, werden sie in ihrer Standardreihenfolge nach den angegebenen Komponenten gezeichnet. Zum Beispiel ist stroke äquivalent zu 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 würde wie folgt gerendert werden:

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

Der Effekt des Strichs darunter könnte über die folgende CSS-Eigenschaft erreicht werden:

css

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

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2 # PaintOrder

Browser-Kompatibilität

BCD tables only load in the browser