Ausbreitung des Coronavirus führt zu immer mehr Tafel-Schließungen

Um 1,6 Millionen bedürftige Tafel-Nutzer:innen jetzt nicht allein zu lassen, ruft Tafel Deutschland e.V. zu Solidarität und Unterstützung auf. Sie wollen helfen? Informationen finden Sie unter tafel.de.

Coronacharityshop.png

Eine weitere Möglichkeit ist der Einkauf im CoronaCharityShop – alle Einnahmen gehen zu 100 % an die Tafeln. Herzlichen Dank für Ihre Unterstützung.

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.