SVG/Farben

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

SVG-Text und SVG-Grafikelemente, die eine Form definieren - Pfadelemente, Grundformen wie rect - werden gerendert, indem sie gefüllt werden was bedeutet, dass das Innere des Objekts gezeichnet wird, und entlang des Umrisses des Objekts eine Randlinie gezeichnet wird.

SVG verwendet die gleichen Farbangaben wie HTML und CSS. Erlaubt sind alle Angaben wie Farbnamen, Hexadezimale Schreibweisen, RGBA-Angaben und HSL-Angaben.

Ursprünglich waren fill und stroke XML-Attribute für SVG, konnten aber auch als Präsentationsattribute in Stylesheets verwendet werden. Nach den CSS-Modulen für Masken und Beschneidungen und Filter gibt es nun das CSS Fill and Stroke Module Level 3, in dem diese Eigenschaften zukünftig auch für HTML-Elemente verfügbar gemacht werden sollen. Nicht standardisierte Versuche wie -webkit-text-stroke werden dann vereinheitlicht.


Eigenschaften zur Farbdarstellung[Bearbeiten]

color[Bearbeiten]

Beachten Sie: Die Eigenschaft color entspricht der gleichnamigen CSS-Eigenschaft, wird aber jedoch noch nicht unterstützt. Verwenden Sie stattdessen die SVG-eigenen Eigenschaften fill bzw. stroke.

color-interpolation[Bearbeiten]

Mit der Eigenschaft color-interpolation steuern Sie das Verhalten bei der Farbberechnung.[1]

Folgende Angaben sind möglich:

  • sRGB: (Standardwert) Farbberechnung nach dem sRGB-Farbmodell
  • auto: Grundeinstellungen des Browsers
  • linearRGB: Farbberechnung nach dem linearen RGB-Farbmodell

paint-order[Bearbeiten]

Mit der Eigenschaft paint-order legen Sie die Zwischenreihenfolge der Darstellung von Füllungen, Umrandungen, Markern fest .[2]

  • SVG 2
  • Chrome
  • Firefox
  • Edge
  • Opera
  • Safari

Details: caniuse.com

Folgende Werte sind möglich:

  • normal: (Standardwert) Ein Element wird zuerst mit Farbe gefüllt, dann werden Randlinien und danach Markierungen gerendert
  • fill: Es werden zuerst die Füllungen gerendert (entspricht normal)
  • stroke: Es werden zuerst die Randlinien gerendert.
  • markers: Es werden zuerst die Markierungen gerendert.
Beispiel ansehen …
<g fill="#dfac20" stroke="#306f91" stroke-width="6" stroke-linejoin="round"
   text-anchor="middle" font-family="sans-serif" font-size="100px" font-weight="bold">
  <text x="200" y="75">stroke over</text>
  <text x="200" y="175" paint-order="stroke">stroke under</text>
</g>

In der oberen Textzeile wird der Text zuerst gefüllt und dann mit einer Randlinie versehen, die ja bei einer Breite von 6 dimensionslosen Einheiten je 3 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 dargestellt werden.

"Beispiel für paint-order, Quelle: W3C

Der rechte Text erhält zuerst seine Kontur und dann erst die Füllung, sodass die Proportionen der Zeichen erhalten bleiben.

Weblinks[Bearbeiten]

  1. MDN: color-interpolation
  2. W3C: PaintOrder