SVG/Farben

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.

• Füllungen
  • fill
  • fill-opacity
  • fill-rule

• Kontur & Randlinien
  • stroke
  • stroke-width
  • stroke-opacity
  • Enden und Spitzen
    • stroke-linecap
    • stroke-linejoin
    • stroke-miterlimit
  • Strichelungen
    • stroke-dasharray
    • stroke-dashoffset
  • Skalierung (vector-effect)

• Verläufe
  • linearGradient
    • stop
  • radialGradient
  • Verlaufsgitter (mesh, meshrow, meshpatch)
• Muster (pattern)
  • Schraffuren (hatch)
• Filter

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

color

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

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

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

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

• 
• 
• 
• 
• 
• 

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>

ansehen …

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.

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