Bildoben  
aptico-Home | AGB-(c) | SVG-Tutorial Inhalt
Schatten

SVG Tutorial

  svg tutorial index  |  Kapitel 12   

12.1 Lineare Verlaeufe - das linearGradient-Element

Lineare Farbverläufe werden durch das Element linearGradient im defs-Container definiert.
In diesem Element werden mit Hilfe der Attribute x1, y1, x2 und y2, 2 Koordinatenpunkte angegeben, welche die Länge und die Richtung des Verlaufsvektors bestimmen.
Die 4 Werte sind relativer Natur (0% bis 100% oder 0 bis 1) und beziehen sich auf das Element, das den Verlauf referenziert.

Das Element linearGradient ist selbst ein Container-Element und sollte mindestens 2 Kind-Elemente stop enthalten. Es sind jedoch auch mehrere Kind-Element möglich. In jedem stop-Element, legen Sie durch Verwendung des Attributs stop-color genau eine Verlaufsfarbe fest und bestimmen den Beginn dieser Farbe auf dem Verlaufsvektor durch Verwendung des Attributs offset.
Der Wert des Attributs offset ist ebenfalls relativer Natur, bezieht sich aber nicht auf das referenzierende Element, sondern auf den Verlaufsvektor. Dies ist von Bedeutung, falls der Verlaufsvektor in der Länge nicht der Ausdehnung des Elements entspricht, also kürzer als 100% ist.

Der Abstand zwischen den jeweils nachfolgenden offset-Werten definiert einen Abschnitt auf dem Verlaufsvektor. In diesem Bereich wird der Farbübergang der beiden Farben berechnet.
Dabei kehrt sich die Richtung des Verlaufsvektors für den nachfolgenden Punkt um.

Beispiel Quellcode


   Grafische Darstellung:   SVG-Darstellung (nur SVG-fähige Browser!)    Screenshot JPG-Grafik
<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="510" height="540"
  xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Farbverläufe</title>
<desc>Funktionsweise von Farbverläufen</desc>
  <defs>
    <style type="text/css">
    <![CDATA[
      text {font-family:Verdana,sans-serif; font-size:14px;
            font-weight:bold;}
      circle {fill:black; stroke:black;}
      line {fill:none; stroke:black; stroke-width:2;
            stroke-dasharray:10,5;}
    ]]>
    </style>
    <marker id="marker1"
      viewBox="0 0 10 10" refX="10" refY="5"
      markerUnits="strokeWidth"
      markerWidth="5" markerHeight="5"
      orient="auto">
      <path d="M 0,0 l 10,5 l -10,5 z"  />
    </marker>

<!-- das Rechteck 'rechteck' -->
    <rect id="rechteck" x="60" y="80" width="250" height="150" />
<!-- die Definition des linearen Verlaufs 'lgr1' -->
    <linearGradient id="lgr1"
      x1="0" y1="0" x2="1" y2="0">
      <stop offset="0" stop-color="limegreen" />
      <stop offset="1" stop-color="yellow" />
    </linearGradient>
  </defs>

<!-- 2 Instanzen von 'rechteck' mit dem Verlauf lgr1 gefüllt -->
  <use xlink:href="#rechteck" fill="url(#lgr1)" />
  <use xlink:href="#rechteck" y="250" fill="url(#lgr1)" />

<!-- Texte, Hilfslinien, Punkte -->
  <text x="30" y="30" style="fill:green">
    &lt;linearGradient x1=&quot;0&quot; y1=&quot;0&quot;
    x2=&quot;1&quot; y2=&quot;0&quot;&gt;
  </text>
  <text x="50" y="290" style="fill:green">
    &lt;stop offset=&quot;0&quot; stop-color=&quot;limegreen&quot; /&gt;
    <tspan x="50" dy="16">
      &lt;stop offset=&quot;1&quot; stop-color=&quot;yellow&quot; /&gt;
    </tspan>
  </text>
  <text x="30" y="520" style="fill:green">
    &lt;/linearGradient&gt;
  </text>
  <circle cx="60" cy="80" r="3" />
  <circle cx="310" cy="80" r="3" />
  <circle cx="310" cy="230" r="3" />
  <circle cx="60" cy="230" r="3" />
  <circle cx="60" cy="390" r="3" />
  <circle cx="310" cy="390" r="3" />
  <circle cx="60" cy="450" r="3" />
  <circle cx="310" cy="460" r="3" />
  <line x1="60" y1="155" x2="310" y2="155" marker-end="url(#marker1)" />
  <line x1="60" y1="390" x2="310" y2="390" marker-end="url(#marker1)" />
  <line x1="60" y1="450" x2="310" y2="450" marker-end="url(#marker1)" />
  <line x1="310" y1="460" x2="60" y2="460" marker-end="url(#marker1)" />
  <text x="30" y="70">(0,0) oder (0%,0%)</text>
  <text x="280" y="70">(1,0) oder (100%,0%)</text>
  <text x="280" y="250">(1,1) oder (100%,100%)</text>
  <text x="30" y="250">(0,1) oder (0%,100%)</text>
  <text x="80" y="125">Verlaufsvektor x1,y1 x2,y2
  <tspan x="80" dy="16">0,0 1,0</tspan>
  </text>
  <text x="80" y="175">oder
  <tspan x="80" dy="16">0%,0% 100%,0%</tspan>
  </text>
  <text x="65" y="410">limegreen</text>
  <text x="255" y="410">yellow</text>
  <text x="12" y="380">offset 0 oder 0%</text>
  <text x="262" y="380">offset 1 oder 100%</text>
  <text x="80" y="440">Berechung des Gradienten</text>
</svg>
      

Die Länge und die Ausrichtung der Verlaufsvektoren können Sie mit den Attributen x1, y1, x2 und y2 also beliebig festlegen. Somit sind also auch kurze oder diagonale Farbverläufe möglich.

Durch Verwendung von mehr als 2 stop-Elementen werden auch mehrere Farbverläufe erzeugt.

Beachten Sie, dass der relative Wert eines offset-Attributs immer größer sein muß, als der Wert des vorangegangenen offset-Attributs. Sind zwei aufeinanderfolgende Werte gleich, oder ist der nachfolgende Wert kleiner als der vorhergende, findet der Übergang zwischen den Farben ohne Farbverlauf statt.

Im nachfolgenden Beispiel finden Sie ein Dutzend lineare Gradienten.
Machen Sie sich einen kleinen Eindruck über die verschiedensten Möglichkeiten der Erzeugung und Darstellung von Farbverläufen in SVG.

Beispiel Quellcode


   Grafische Darstellung:   SVG-Darstellung (nur SVG-fähige Browser!)    Screenshot JPG-Grafik
<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="660" height="480"
  xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Das Element linearGradient</title>
<desc>Verschiedene Beispiele für linearer Farbverläufe</desc>
  <defs>
    <style type="text/css">
    <![CDATA[
      text {font-family:Verdana,sans-serif; font-size:40px;
            font-stretch:ultra-expanded;}
    ]]>
    </style>
    <rect id="rechteck" x="20" y="20" width="180" height="80" />

    <linearGradient id="lgr1"
      x1="0" y1="0" x2="1" y2="0">
      <stop offset="0" stop-color="blue" />
      <stop offset="1" stop-color="yellow" />
    </linearGradient>
    <linearGradient id="lgr2"
      x1="0" y1="0" x2="1" y2="0">
      <stop offset=".2" stop-color="blue" />
      <stop offset=".8" stop-color="yellow" />
    </linearGradient>
    <linearGradient id="lgr3"
      x1="0" y1="0" x2="1" y2="0">
      <stop offset=".4" stop-color="blue" />
      <stop offset=".6" stop-color="yellow" />
    </linearGradient>
    <linearGradient id="lgr4"
      x1="0" y1="0" x2="1" y2="0">
      <stop offset=".5" stop-color="blue" />
      <stop offset=".5" stop-color="yellow" />
    </linearGradient>

    <linearGradient id="lgr5"
      x1="0" y1="0" x2="1" y2="0">
      <stop offset="0" stop-color="red" />
      <stop offset="1" stop-color="limegreen" />
    </linearGradient>
    <linearGradient id="lgr6"
      x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="red" />
      <stop offset="1" stop-color="limegreen" />
    </linearGradient>
    <linearGradient id="lgr7"
      x1="0" y1="0" x2="1" y2="1">
      <stop offset="0" stop-color="red" />
      <stop offset="1" stop-color="limegreen" />
    </linearGradient>
    <linearGradient id="lgr8"
      x1="0" y1="1" x2="1" y2="0">
      <stop offset="0" stop-color="red" />
      <stop offset="1" stop-color="limegreen" />
    </linearGradient>

    <linearGradient id="lgr9"
      x1="0" y1="0" x2="1" y2="0">
      <stop offset="0" stop-color="blue" />
      <stop offset=".25" stop-color="yellow" />
      <stop offset=".5" stop-color="red" />
      <stop offset=".75" stop-color="green" />
      <stop offset="1" stop-color="blue" />
    </linearGradient>
    <linearGradient id="lgr10"
      x1="0" y1="0" x2="1" y2="0">
      <stop offset="0" stop-color="blue" />
      <stop offset=".2" stop-color="yellow" />
      <stop offset=".8" stop-color="yellow" />
      <stop offset="1" stop-color="blue" />
    </linearGradient>
    <linearGradient id="lgr11"
      x1="0" y1="0" x2="1" y2="0">
      <stop offset="0" stop-color="blue" />
      <stop offset=".1" stop-color="yellow" />
      <stop offset=".2" stop-color="white" />
      <stop offset=".9" stop-color="blue" />
    </linearGradient>
    <linearGradient id="lgr12"
      x1="0" y1="0" x2="1" y2="1">
      <stop offset="0" stop-color="white" />
      <stop offset=".3" stop-color="yellow" />
      <stop offset=".5" stop-color="blue" />
      <stop offset=".7" stop-color="yellow" />
      <stop offset="1" stop-color="white" />
    </linearGradient>
  </defs>

  <use xlink:href="#rechteck" fill="url(#lgr1)" />
  <use xlink:href="#rechteck" y="100" fill="url(#lgr2)" />
  <use xlink:href="#rechteck" y="200" fill="url(#lgr3)" />
  <use xlink:href="#rechteck" y="300" fill="url(#lgr4)" />

  <use xlink:href="#rechteck" x="220" fill="url(#lgr5)" />
  <use xlink:href="#rechteck" x="220" y="100" fill="url(#lgr6)" />
  <use xlink:href="#rechteck" x="220" y="200" fill="url(#lgr7)" />
  <use xlink:href="#rechteck" x="220" y="300" fill="url(#lgr8)" />

  <use xlink:href="#rechteck" x="440" fill="url(#lgr9)" />
  <use xlink:href="#rechteck" x="440" y="100" fill="url(#lgr10)" />
  <use xlink:href="#rechteck" x="440" y="200" fill="url(#lgr11)" />
  <use xlink:href="#rechteck" x="440" y="300" fill="url(#lgr12)" />

  <text x="50" y="465" style="fill:url(#lgr9);">
  linearGradient&apos;s
  </text>
</svg>
      



index  |  Kapitel 12  <<  | 12.1 |  >>  12.2   Radiale Verlaeufe - das radialGradient-Element