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

SVG Tutorial

  svg tutorial index  |  Kapitel 12   

12.2 Radiale Verlaeufe - das radialGradient-Element

Radiale Farbverläufe werden durch das Element radialGradient im defs-Container definiert.
Durch die Attribute cx und cy, die eine relative Angabe (von 0 bis 1 oder von 0% bis 100%) erwarten, können Sie den Mittelpunkt des Kreisverlaufs festlegen. Das Attribut r definiert den Radius bzw. die Ausdehnung des Kreisverlaufs.

Normalerweise wird an der Stelle des Mittelpunktes die höchste Farbintensität der festgelegen Verlaufsfarbe erzeugt. Durch die Verwendung der Attribute fx und fy können Sie die höchste Farbintensität aber auch an einer anderen Position innerhalb des Verlaufs platzieren. Im folgenden Beispiel werden die Verläufe der mittleren Spalte mit Hilfe dieser Attribute erzeugt.

Wenn Sie keines der oben genannten Attribute verwenden, wird für jedes der Attribute der voreingestellte Wert 0.5 verwendet.

Das Element radialGradient ist, wie auch das Element linearGradient selbst ein Container-Element und sollte mindestens 2 Kind-Elemente stop enthalten. In jedem stop-Element, legen Sie durch Verwendung des Attributs stop-color genau eine Verlaufsfarbe fest und bestimmen den Beginn dieser Farbe auf den Verlaufsvektoren durch Verwendung des Attributs offset.
Bei radialen Gradienten verlaufen mehrere Vektoren vom Mittelpunkt des Gradienten sternförmig nach außen.
Der Wert des Attributs offset ist ebenfalls relativer Natur, bezieht sich aber nicht auf das referenzierende Element, sondern auf die Verlaufsvektoren. Dies ist von Bedeutung, falls die Verlaufsvektoren in der Länge nicht der Ausdehnung des Elements entsprechen, also kürzer als 100% sind.

Eine weitere Möglichkeit zur Darstellung radialer Verläufe bietet das Attribut spreadMethod.
Dieses Attribut akzeptiert 3 Werte. Der Wert pan ( die Voreinstellung) bewirkt, dass der füllbare Raum des Elements mit der zuletzt angegebenen Farbe ausgefüllt wird. Der Wert reflect wiederholt den Verlauf in wechselnder Reihenfolge (start-end-end-start-start-...), der Wert repeat wiederholt den Verlauf in gleichbleibender Reihenfolge (start-end-start-end-start-...).

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 radialGradient</title>
<desc>Verschiedene Beispiele für radiale 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" />

    <radialGradient id="rgr1"
      cx=".5" cy=".5" r=".5">
      <stop offset="0" stop-color="blue" />
      <stop offset="1" stop-color="yellow" />
    </radialGradient>
    <radialGradient id="rgr2"
      cx=".9" cy=".5" r=".5">
      <stop offset="0" stop-color="blue" />
      <stop offset="1" stop-color="yellow" />
    </radialGradient>
    <radialGradient id="rgr3"
      cx=".3" cy=".7" r=".7">
      <stop offset="0" stop-color="blue" />
      <stop offset="1" stop-color="yellow" />
    </radialGradient>
    <radialGradient id="rgr4"
      cx=".5" cy=".5" r=".5">
      <stop offset="0" stop-color="blue" />
      <stop offset=".5" stop-color="yellow" />
      <stop offset="1" stop-color="blue" />
    </radialGradient>

    <radialGradient id="rgr5"
      cx=".5" cy=".5" r=".5" fx="1" fy=".5">
      <stop offset="0" stop-color="blue" />
      <stop offset="1" stop-color="yellow" />
    </radialGradient>
    <radialGradient id="rgr6"
      cx=".5" cy=".5" r=".5" fx=".5" fy="1">
      <stop offset="0" stop-color="blue" />
      <stop offset="1" stop-color="yellow" />
    </radialGradient>
    <radialGradient id="rgr7"
      cx=".8" cy=".3" r=".9" fx=".8" fy=".3">
      <stop offset="0" stop-color="blue" />
      <stop offset="1" stop-color="yellow" />
    </radialGradient>
    <radialGradient id="rgr8"
      cx=".5" cy="1" r=".9" fx=".3" fy="0">
      <stop offset="0" stop-color="blue" />
      <stop offset="1" stop-color="yellow" />
    </radialGradient>

    <radialGradient id="rgr9"
      cx=".5" cy=".5" r=".5">
      <stop offset="0" stop-color="blue" />
      <stop offset="1" stop-color="yellow" />
    </radialGradient>
    <radialGradient id="rgr10" spreadMethod="repeat"
      cx=".5" cy=".5" r=".2">
      <stop offset="0" stop-color="blue" />
      <stop offset="1" stop-color="yellow" />
    </radialGradient>
    <radialGradient id="rgr11"
      cx=".5" cy=".5" r=".5" spreadMethod="reflect">
      <stop offset="0" stop-color="blue" />
      <stop offset="1" stop-color="yellow" />
    </radialGradient>
    <radialGradient id="rgr12"
      cx=".5" cy=".5" r=".5">
      <stop offset=".3" stop-color="blue" />
      <stop offset=".7" stop-color="yellow" />
    </radialGradient>

    <radialGradient id="rgr_text"
      cx=".5" cy=".5" r=".8" fx=".5" fy="1">
      <stop offset="0" stop-color="red" />
      <stop offset=".25" stop-color="yellow" />
      <stop offset=".5" stop-color="blue" />
      <stop offset=".75" stop-color="yellow" />
      <stop offset="1" stop-color="red" />
    </radialGradient>
  </defs>

  <use xlink:href="#rechteck" fill="url(#rgr1)" />
  <use xlink:href="#rechteck" y="100" fill="url(#rgr2)" />
  <use xlink:href="#rechteck" y="200" fill="url(#rgr3)" />
  <use xlink:href="#rechteck" y="300" fill="url(#rgr4)" />

  <use xlink:href="#rechteck" x="220" fill="url(#rgr5)" />
  <use xlink:href="#rechteck" x="220" y="100" fill="url(#rgr6)" />
  <use xlink:href="#rechteck" x="220" y="200" fill="url(#rgr7)" />
  <use xlink:href="#rechteck" x="220" y="300" fill="url(#rgr8)" />

  <use xlink:href="#rechteck" x="440" fill="url(#rgr9)" />
  <use xlink:href="#rechteck" x="440" y="100" fill="url(#rgr10)" />
  <use xlink:href="#rechteck" x="440" y="200" fill="url(#rgr11)" />
  <use xlink:href="#rechteck" x="440" y="300" fill="url(#rgr12)" />

  <text x="18" y="455" style="fill:url(#rgr_text);font-weight:bold;">
  radialGradient&apos;s
  </text>
</svg>
      

Sie können Gradienten auch transformieren. Dazu müssen Sie allerdings das besondere Attribut gradientTransform im Element linearGradient oder im Element radialGradient verwenden.
gradientTransform ist in der gleichen Art und Weise zu verwenden wie das transform-Attribut. Sie können also translate, rotate, scale, skewX und skewY inclusive den jeweiligen Zahlwerten (Koordinaten, Radien, ...) als Wert verwenden.

Um die Durchsichtbarkeit von Verlausfarben zu ändern gibt es ebenfalls ein besonderes Attribut: stop-opacity. stop-opacity wird im Element stop einer Verlaufsfarbe zugeordnet.
Es akzeptiert einen Wert zwischen 0 und 1, wie alle anderen Attribute, die eine Durchsichtbarkeit einstellen (opacity, stroke-opacity, fill-opacity, ..).




index  |  Kapitel 12  |  12.1  <<  | 12.2 |  >>  12.3   Muster - das pattern-Element