4.3Farbverläufe

Es existieren in SVG zwei unterschiedliche Arten von Farbverläufen:

• lineare Farbverläufe
• radiale Farbverläufe

Farbverläufe werden nicht als Eigenschaft des jeweiligen Elements gespeichert, sondern zentral im Definitionsabschnitt definiert und über eine ID dem Element zugewiesen. Somit kann ein Verlauf einmal festlegt, aber beliebig oft referenziert werden.

4.3.1Der lineare Farbverlauf

Der lineare Farbverlauf folgt standardmäßig einem Vektor von links nach rechts und wird mit dem Element <linearGradient> eingeleitet. Dieses Element besitzt folgende Attribute:

• gradientTransform - dient der Transformation des Verlaufs
• x1 - horizontaler Startpunkt
• y1 - vertikaler Startpunkt
• x2 - horizontaler Endpunkt
• y2 - vertikaler Endpunkt

Die Werte der Attribute x1, y1, x2 und y2 sind übrigens keine Pixelangaben wie man vielleicht zuerst vermutet. Die Punkte werden relativ zum Element, das gefüllt werden soll, angegeben und erhalten Prozentangaben. Dabei bedeuten 0% ganz links bzw. ganz oben und 100% ganz rechts bzw. ganz unten. Die  Abbildung 4-1 sollte dies etwas verdeutlichen.

Wie der Name des Attributs gradientTransform schon vermuten läßt, lassen sich damit Farbverläufe transformieren. So kann man beispielsweise die Richtung des Verlaufs verändern. Allerdings ist es meist ratsam und schneller, den Farbverlaufsvektor anzupassen. Mehr Informationen zu den verfügbaren Transformationen findet man im Kapitel  Transformationen. Wie ein einfacher Farbverlauf von schwarz nach weiß in SVG definiert wird, zeigt  Listing 4-1.

<linearGradient id="verlauf">
  <stop offset="0%" stop-color="black" />
  <stop offset="100%" stop-color="white" />
</linearGradient>

Als letztes Beispiel zu den linearen Farbübergängen folgt der SVG-Code eines schrägen Verlaufs wie er in  Abbildung 4-1 zu sehen ist.

 Anzeigebeispiel

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="verlauf" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="black" />
      <stop offset="100%" stop-color="white" />
    </linearGradient>
  </defs>
  <rect x="55" y="20" width="200" height="100" fill="url(#verlauf)" />
</svg>

4.3.2Farben, Positionen und Transparenz eines Farbverlaufs

In  Listing 4-1 und  Listing 4-2 taucht ein noch unbekanntes Element des Namens <stop> auf. Mit diesem Element lassen sich die Eigenschaften Farbe, deren Position und deren Transparenz setzen.

<stop offset="0%" stop-color="black" stop-opacity="100%" />

Die Eigenschaften im Detail:

• offset - regelt die Position der Farbe (erlaubte Werte 0-1 oder 0%-100%)
• stop-color - setzt die Farbe
• stop-opacity - regelt die Transparenz der Farbe (erlaubte Werte siehe offset)

4.3.3Der radiale Farbverlauf

Der radiale Verlauf erstellt einen Farbübergang anhand eines Kreises. Auch hier folgt der Verlauf einem Vektor, der jedoch vom Mittelpunkt nach außen gerichtet ist. Das <radialGradient>-Element definiert einen radialen Verlauf und besitzt diese Eigenschaften:

• gradientTransform - dient der Transformation des Verlaufs
• cx - horizontaler Startpunkt
• cy - vertikaler Startpunkt
• fx - horizontaler Endpunkt
• fy - vertikaler Endpunkt
• r - Radius

Die Attribute cx, cy, fx, fy und r sind standardmäßig mit dem Wert 0.5 bzw. 50% vorbelegt. Zudem besitzt gradientTransform dieselbe Bedeutung wie bei den linearen Farbverläufen. Der Code des  Listings 4-4 beschreibt einen einfachen radialen Farbübergang.

<radialGradient id="verlauf">
  <stop offset="0%" stop-color="white" />
  <stop offset="100%" stop-color="black" />
</radialGradient>

 Listing 4-5 stellt den Code eines radialen Farbverlaufs dar, während  Abbildung 4-2 den gerenderten Verlauf zeigt.

 Anzeigebeispiel

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient id="verlauf">
      <stop offset="0%" stop-color="white" />
      <stop offset="100%" stop-color="black" />
    </radialGradient>
  </defs>
  <rect x="20" y="20" width="200" height="100" fill="url(#verlauf)" />
</svg>

Es ist darauf zu achten, daß im Gegensatz zu linearen Farbübergängen bei radialen Übergängen die Farben von innen nach außen verlaufen.

4.3.4Wiederholung von Farbverläufen

Sobald der Raum eines Farbübergangs mittels eines Vektors eingeschränkt wird, bleibt der Rest des Raums frei. Mit der Eigenschaft spreadMethod kann man den ungenutzten Teil ebenfalls füllen. Die Werte des Attributs lauten:

• pad - der Verlauf wird abgeschnitten (Standard)
• reflect - horizontale und vertikale Spiegelung
• repeat - Wiederholung

Das folgende  Listing 4-6 beschreibt drei Rechtecke, die alle einen identischen Farbverlauf zugewiesen bekommen. Sie unterscheiden sich einzig und allein in den spreadMethod-Werten.

 Anzeigebeispiel

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">

  <defs>
    <linearGradient id="pad" x1="0%" x2="0%" y1="50%" y2="0%" spreadMethod="pad">
      <stop offset="0%" stop-color="white" />
      <stop offset="100%" stop-color="black" />
    </linearGradient>
    <linearGradient id="reflect" x1="0%" x2="0%" y1="50%" y2="0%" spreadMethod="reflect">
      <stop offset="0%" stop-color="white" />
      <stop offset="100%" stop-color="black" />
   </linearGradient>
    <linearGradient id="repeat" x1="0%" x2="0%" y1="50%" y2="0%" spreadMethod="repeat">
      <stop offset="0%" stop-color="white" />
      <stop offset="100%" stop-color="black" />
    </linearGradient>
  </defs>

  <g stroke="#000000" stroke-width="2">
    <rect x="20" y="20" width="200" height="100" fill="url(#pad)" />
    <rect x="230" y="20" width="200" height="100" fill="url(#reflect)" />
    <rect x="440" y="20" width="200" height="100" fill="url(#repeat)" />
  </g>

</svg>

 Abbildung 4-3 zeigt die Ausgabe eines SVG-Betrachters, welcher das oben aufgeführte Listing bearbeitet hat.