Bitte warten...

SVG: Muster und Farbverläufe

Muster

► W3C-Empfehlung: <defs> <pattern>

Über die Attribute fill und stroke können nicht nur Farben festgelegt werden, sondern auch Muster. Diese werden zunächst innerhalb des <defs>-Abschnittes mit dem Tag <pattern> definiert und anschließend über die entsprechende ID in dem betreffenden Element referenziert, auf das das gewünschte Muster angewendet werden soll.

Hierbei ist zu beachten, dass Firefox und Chrome beim Export als PDF (und möglicherweise auch beim Drucken allgemein) die Inhalte eines <pattern>-Elements in eine Rastergrafik umwandeln.

Code kopieren
<svg width='350px' height='180px'>
  <defs>
    <pattern id="pattern1" x="0" y="0" width="10" height="10" patternUnits="userSpaceOnUse">
      <rect fill='green' x='0' y='0' width='10' height='10' />
      <line stroke='orange' stroke-width='3' stroke-linecap='square' x1='5' y1='0' x2='0' y2='5' />
      <line stroke='orange' stroke-width='3' stroke-linecap='square' x1='10' y1='5' x2='5' y2='10' />
    </pattern>
    <pattern id="pattern2" x="10" y="10" width="20" height="20" patternUnits="userSpaceOnUse">
      <circle fill='red' cx='5' cy='5' r='3' />
    </pattern>
  </defs>
  <rect stroke='url(#pattern1)' stroke-width='10' fill='url(#pattern2)' x='20' y='20' width='310' height='140' />
</svg>

Farbverläufe

In SVG gibt es zwei Arten von Farbverläufen. Einerseits lineare Farbverläufe, die sich zwischen zwei parallelen Geraden erstrecken. Andererseits radiale Farbverläufe, die sich von einem zentralen Punkt ausdehnen. Innerhalb des Farbverlaufs lassen sich Farbton und Deckkraft einstellen.

Farbverläufe werden zunächst innerhalb eines <defs>-Elements definiert und anschließend mit einer CSS-Regel oder einem fill-Attribut auf das gewünschte SVG-Element angewendet.

Lineare Farbverläufe

► W3C-Empfehlung: <linearGradient> <stop>

Die Eigenschaften eines linearen Farbverlaufs werden mit Hilfe des <linearGradient>-Elements festgelegt. Um dieses später referenzieren zu können, benötigt es ein id-Attribut mit einem eindeutigen Namen. Weiterhin müssen zwei Koordinatenpaare x1/y1 und x2/y2 angegeben werden, in denen Anfangs- und Endpunkt des Farbverlaufs enthalten sind. Diese Punkte werden üblicherweise in Prozent relativ zu den äußeren Dimensionen des Elements angegeben, das den Farbverlauf enthalten soll.

Erstreckt sich der Farbverlauf nicht über die gesamte Fläche eines Elements, so kann im Attribut spreadMethod angegeben werden, wie die übrigen Flächen dargestellt werden sollen:

pad – Anfangs- bzw. Endfarbe ausdehnen (Vorgabe)
repeat – Farbverlauf wiederholen
reflect – Farbverlauf spiegeln

Innerhalb des <linearGradient>-Elements können nun beliebig viele <stop>-Elemente notiert werden, in denen die Positionen der einzelnen Farben des Farbverlaufs festgelegt werden. Die wichtigsten Attribute sind hier:

offset – Position der Farbe relativ zur Ausdehnung des gesamten Farbverlaufs
stop-color – Farbe
stop-opacity – Deckkraft zwischen 0 (100 % transparent) und 1 (100 % deckend)

Im Beispiel erhält das <rect>-Element in Zeile 9 die CSS-Regel fill:url(#grad1);, wodurch der Farbverlauf auf dieses Element angewendet wird.

Code kopieren
<svg width='350px' height='180px'>
  <defs>
    <linearGradient id='grad1' x1='40%' y1='40%' x2='60%' y2='60%' spreadMethod='repeat'>
      <stop offset='0%'   stop-color='blue' />
      <stop offset='100%' stop-color='red' />
    </linearGradient>
  </defs>
  <rect x='20' y='20' width='310' height='140' rx='10' style='fill:url(#grad1);opacity:1;stroke:yellow;stroke-width:4px;stroke-opacity:1;' />
</svg>

Soll der Farbverlauf nicht nur eine Änderung der Farbe, sondern auch der Deckkraft enthalten, so kann man das <stop>-Element um das Attribut stop-opacity erweitern.

Code kopieren
<svg width='350px' height='180px'>
  <defs>
    <linearGradient id='grad5' x1='0%' y1='0%' x2='100%' y2='0%' spreadMethod='pad'>
      <stop offset='0%'   stop-color='blue' />
      <stop offset='100%' stop-color='red' />
    </linearGradient>
  </defs>
  <rect x='20' y='20' width='310' height='140' rx='10' style='fill:url(#grad5);opacity:1;stroke:yellow;stroke-width:4px;stroke-opacity:1;' />
</svg>

<svg width='350px' height='180px'>
  <defs>
    <linearGradient id='grad6' x1='0%' y1='0%' x2='100%' y2='0%' spreadMethod='pad'>
      <stop offset='0%'   stop-color='blue' stop-opacity='1' />
      <stop offset='100%' stop-color='red'  stop-opacity='.5' />
    </linearGradient>
  </defs>
  <rect x='20' y='20' width='310' height='140' rx='10' style='fill:url(#grad6);opacity:1;stroke:yellow;stroke-width:4px;stroke-opacity:1;' />
</svg>

Radiale Farbverläufe

► W3C-Empfehlung: <radialGradient> <stop>

Die Eigenschaften eines radialen Farbverlaufs werden mit Hilfe des <radialGradient>-Elements festgelegt. Die Notierung von radialen Farbverläufen entspricht weitgehend den linearen Farbverläufen. Im Unterschied zu diesen enthält das <radialGradient>-Element folgende Attribute:

fx/fy – Koordinaten für den Fokus des Farbverlaufs
cx/cy – Koordinaten für das Zentrum des Farbverlaufs
r – Radius des Farbverlaufs

Alle Werte werden auch hier in Prozent relativ zu den äußeren Dimensionen des Elements angegeben, das den Farbverlauf enthalten soll.

Während die Koordinaten für den Fokus (fx/fy) den Ausgangspunkt (Mittelpunkt) des Farbverlaufs festlegen, kann mit Hilfe der Koordinaten für das Zentrum (cx/cy) die Ausbreitung des Farbverlaufs exzentrisch verzerrt werden.

Man beachte, wie der Farbverlauf im Beispiel durch die rechteckige Form des Bezugselements verzerrt wird.

Code kopieren
<svg width='350px' height='180px'>
  <defs>
    <radialGradient id='grad2' r='80%' cx='20%' cy='20%' fx='50%' fy='50%' spreadMethod='pad'>
      <stop offset='0%'  stop-color='blue' />
      <stop offset='70%' stop-color='red' />
    </radialGradient>
  </defs>
  <rect x='20' y='20' width='310' height='140' rx='10' style='fill:url(#grad2);opacity:1;stroke:yellow;stroke-width:4px;stroke-opacity:1;' />
</svg>

Soll der Farbverlauf nicht relativ zum Bezugselement, sondern relativ zur gesamten Grafik dargestellt werden, so ergänzt man das <radialGradient>-Element um das Attribut gradientUnits='userSpaceOnUse':

Code kopieren
<svg width='350px' height='180px'>
  <defs>
    <radialGradient id='grad3' r='50%' cx='50%' cy='50%' fx='50%' fy='50%' spreadMethod='pad'>
      <stop offset='0%'   stop-color='blue' />
      <stop offset='100%' stop-color='red' />
    </radialGradient>
  </defs>
  <rect x='20' y='20' width='150' height='65' rx='10' style='fill:url(#grad3);opacity:1;stroke:yellow;stroke-width:4px;stroke-opacity:1;' />
  <rect x='180' y='20' width='150' height='65' rx='10' style='fill:url(#grad3);opacity:1;stroke:yellow;stroke-width:4px;stroke-opacity:1;' />
  <rect x='20' y='95' width='150' height='65' rx='10' style='fill:url(#grad3);opacity:1;stroke:yellow;stroke-width:4px;stroke-opacity:1;' />
  <rect x='180' y='95' width='150' height='65' rx='10' style='fill:url(#grad3);opacity:1;stroke:yellow;stroke-width:4px;stroke-opacity:1;' />
</svg>

<svg width='350px' height='180px'>
  <defs>
    <radialGradient id='grad4' gradientUnits='userSpaceOnUse' r='50%' cx='50%' cy='50%' fx='50%' fy='50%' spreadMethod='pad'>
      <stop offset='0%'   stop-color='blue' />
      <stop offset='100%' stop-color='red' />
    </radialGradient>
  </defs>
  <rect x='20' y='20' width='150' height='65' rx='10' style='fill:url(#grad4);opacity:1;stroke:yellow;stroke-width:4px;stroke-opacity:1;' />
  <rect x='180' y='20' width='150' height='65' rx='10' style='fill:url(#grad4);opacity:1;stroke:yellow;stroke-width:4px;stroke-opacity:1;' />
  <rect x='20' y='95' width='150' height='65' rx='10' style='fill:url(#grad4);opacity:1;stroke:yellow;stroke-width:4px;stroke-opacity:1;' />
  <rect x='180' y='95' width='150' height='65' rx='10' style='fill:url(#grad4);opacity:1;stroke:yellow;stroke-width:4px;stroke-opacity:1;' />
</svg>