SVG/Attribute/paint-order

Aus SELFHTML-Wiki
< SVG‎ | Attribute
Wechseln zu: Navigation, Suche

Die paint-order-Eigenschaft legt die Zwischenreihenfolge der Darstellung von Füllungen, Umrandungen, Markern fest.

erlaubte Werte

normal, fill, stroke, markers

default-Wert normal
erlaubt in
Container-ElementenContainer-Elementen

Information: Container-Elemente (SVG)

Elemente, die grafische oder andere Container-Elemente enthalten dürfen
grafische Elementengrafische Elementen

Information: grafische Elemente (SVG)

Elemente, die dazu führen, dass etwas gezeichnet wird
und Text-Elementen
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, sodass nur die außenliegenden 3px dargestellt werden.
Empfehlung: Verwenden Sie die paint-order-Eigenschaft bei Text, da so die Proportionen erhalten bleiben und er so lesbarer bleibt.

Siehe auch

Weblinks