decocode decocode deco    

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 #

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-colorFarbe als Name oder hexadezimal (z. B. #00cc00)
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.

Quelltext auswählen
1
2
3
4
5
6
7
8
9
<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.

Quelltext auswählen
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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 #

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.

Quelltext auswählen
1
2
3
4
5
6
7
8
9
<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':

Quelltext auswählen
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<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>