|
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">
<linearGradient x1="0" y1="0"
x2="1" y2="0">
</text>
<text x="50" y="290" style="fill:green">
<stop offset="0" stop-color="limegreen" />
<tspan x="50" dy="16">
<stop offset="1" stop-color="yellow" />
</tspan>
</text>
<text x="30" y="520" style="fill:green">
</linearGradient>
</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's
</text>
</svg>
|
