|
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'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, ..).
| 
