CSS/Eigenschaften/paint-order

Die paint-order-Eigenschaft legt die Darstellungsreihenfolge der Darstellung von Füllungen, Randlinien und Markern fest. Diese Reihenfolge ist von Bedeutung, weil später gezeichnete Darstellungselemente früher gezeichnete Element überdecken können. Die Standardreihenfolge dieser Darstellungselemente ist: Zuerst die Füllungen, dann die Randlinen und zum Schluss die Marker.

Dieses SVG Attribut kann auch als CSS-Eigenschaft gesetzt werden.

Erlaubte Werte

• normal: (Standardwert) Die Ausgabe erfolgt in der Standardreihenfolge.
• Ein bis drei der folgenden Schlüsselwörter, durch Leerzeichen getrennt:
  • fill (für die Füllung)
  • stroke (für die Randlinie)
  • markers (für Markierungen)
  Geben Sie nicht alle Schlüsselwörter an, wird die Liste mit den fehlenden Schlüsselwörtern in ihrer Standardreihenfolge ergänzt. Die Darstellung der Gestaltungselemente erfolgt in der so erhaltenen Reihenfolge.

Standardwert

normal

anwendbar auf

Container-Elementen

• grafische Elementen und Text-Elementen

Präsentationsattribut

ja

mit CSS animierbar

ja

Beispiel

<g fill="red" 
   stroke="white" stroke-width="6" stroke-linejoin="round"
   text-anchor="middle"
   font-size="50px" font-weight="bold">
  <text x="200" y="75">stroke over</text>
  <text x="200" y="150" 
        paint-order="stroke">stroke under
  </text>
</g>

In der oberen Textzeile wird der Textinhalt zuerst gefüllt und dann mit einer Randlinie versehen, die ja bei einer Breite von 6 Einheiten je 3 Einheiten nach außen und innen geht.
In der unteren Textzeile wird durch paint-order="stroke" zuerst die Randlinie gerendert, die dann durch die Füllung verdeckt wird, sodass nur die außenliegenden 3 Einheiten dargestellt werden.

Empfehlung: Verwenden Sie die paint-order-Eigenschaft bei Text, da so die Proportionen erhalten bleiben und er so lesbarer bleibt.

Siehe auch

• SVG/Farben/Konturen und Randlinien
  • paint-order

Weblinks

• W3C: Paint-order Property