Verlaufselemente
Farbverläufe werden im Defintionsbereich <defs> notiert. Im eigentlichen Sinne stellen die beiden Verlaufselemente Container dar, die mit mindesgtens zwei <stop>-Elementen den Verlauf bestimmen.
Die Attribute des <stop>-Elements: offset und stop-color.
<linearGradient> | |
Die spezifischen Attribute x1, y1, x2 und y2 legen den Beginn, die Länge sowie den Winkel/Richtung des Vektors fest. Die Werte werden mit 0 bis 100% oder 0 bis 1 angegeben. | |
|
1. Beispiel: <linearGradient x1="0" y1="0" x2="1" y2="0" > <stop offset="0" stop-color="#ff00ff" /> <stop offset="1" stop-color="yellow" /> </linearGradient> 2. Beispiel: <linearGradient x1="0" y1="0" x2=".5" y2="0" > x2=.5 staucht den Verlauf horizontal. Obwohl die nachfolgenden Offsets eine gleichmäßige Verteilung mit offset=.2 und offset=.8 bestimmen, wird in diesem Fall mit diesem Wert der Verlaufsvektor halbiert. Werte über 1 verschieben den Verlauf über den Anzeigebereich hinaus. <stop offset="0" stop-color="#ff00ff" /> <stop offset=".2" stop-color="yellow" /> <stop offset=".8" stop-color="yellow" /> <stop offset="1" stop-color="#ff00ff" /> </linearGradient> 3. Beispiel: <linearGradient y2=1 bestimmt vertikalen Vektor x1="0" y1="0" x2="0" y2="1" />stop und stop-color wie 1 4. Beispiel: <linearGradient x1="0" y1="0" x2=".5" y2="-.2" > <stop offset="0" stop-color="#ff00ff" /> <stop offset="1" stop-color="#ffff00" /> </linearGradient> Mit x2 und y2 wird der Winkel bestimmt. y2 < 0 - bewirkt einen abfallenden Verlauf. Wird x1="1" gesetzt, erhält der Vektor entgegengesetzte Werte. Nur ausprobiert und nicht dargestellt. Das wird jetzt Frickelei! x2=1 und y2=1 5. Beispiel: Der Verlaufsvektor ergibt sich aus dem Lot über der Diagonalen (x=100% y=100%). Mit dem 6. Beispiel wird mittels vier Stops ein Verlauf von Magenta über Cyan und Yellow wieder zu Magenta erzeugt. Erklärung spar ich mir. |
|
<radialGradient> | |
Die spezifischen Attribute cx, cy und r legen den Kreismittelpunkt sowie den Radius des Vektors fest. Dass diese Angaben im Verhältnis zur anzeigenden Box stehen, ist klar. Radius r=".5" beschreibt nichts weiter als 50% zur x- und y-Dimension des referenzierenden Objekts. Mit fx und fy wird die Position des Verlaufs geändert. Alle Offsets verschieben sich proportional aus dem Zentrum (Das wird jetzt astrophysikalisch: „Ohne den Ereignishorizont verlassen zu können!“) Boah! Da allerdings kein Schwarzes Loch erzeugt wird und damit keine Singularität bestehen kann, bleibt alles im sichtbaren Bereich, egal um wieviel Prozent über 100 fx/fy angegeben wird, im Gegensatz zu lineraGradient. Schade und ich hätte so gern eins gehabt. Bleibt noch spreadMethod mit den Eigenschaften "pan", "repeat" und "reflect". |
|
| Die beiden oberen Abbildungen demonstrieren lediglich ihr Verlaufsverhalten bezogen auf das jeweils referenzierende Rechteck und Quadrat.
<radialGradient cx=".5" cy=".5" r=".5" > Beispiel 3: Verschiebung des Verlaufszentrums <radialGradient cx=".5" cy=".5" r=".5" fx="1" fy=".5" > Beispiel 4: mit fünf Stops und spreadMethod="pan": Diese Eigenschaft ändert nichts am Aussehen zu den bisherigen. Ohne diesem Attribut ist dies sowieso die Einstellung. Muss halt bloß mal gesagt werden. Beispiel 5: Verschiebung des Verlaufszentrums <radialGradient cx=".5" cy=".5" r=".5" fx="1" fy="1" > Die f-Werte unter 1 also < 100% bewegen das Verlaufszentrum innerhalb des Ereignis/Vektorraumes, bei gleich 1 (wie bereits beschrieben) befindet sich das Zentrum am Ereignishorizont. Am Beispiel ist dieser halbvier oder 315°. Größere Werte verändern nur die Position am Horizont, die ich allerdings dann nicht mehr nachvollziehen kann. Brauch ich auch nicht, weil ... was soll das! Beispiel 6: mit fünf Stops und spreadMethod="reflect": wechselt/spiegelt die stop-Reihenfolge. Beispiel 7: mit fünf Stops und spreadMethod="repeat": wiederholt die stop-Reihenfolge. |
|