Referenz:SVG/Attribute/paint-order

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
Attribut paint-order
Beschreibung legt die Zwischenreihenfolge der Darstellung von Füllungen, Umrandungen, Markern fest
erlaubte Werte

normal, fill, stroke, markers

default-Wert normal
animierbar ja
anwendbar auf Formen und Text-Elemente (Unterschied Tag Element Attribut)
Browsersupport
  • Chrome
  • Firefox
  • Leer
  • Opera
  • Safari
Spezifikation W3c logo klein.gif Paint-order Property
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 6px je 3px nach außen und innen geht.
In der unteren Textzeile wird durch paintorder="stroke" zuerst die Randlinie gerendert, die dann durch die Füllung verdeckt wird, so dass nur die außenliegenden 3px dargestellt werden.

Beachten Sie
Tipp

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