Lineare Farbverläufe

(Auszug aus "Das Einsteigerseminar SVG — Webgrafiken mit XML" von Helma Spona)

Lineare Farbverläufe werden mit dem <linearGradient>-Tag erzeugt. Er unterstützt die folgenden Attribute:

• gradientUnits, legt fest, ob ein Objekt oder die Grafikfläche gefüllt werden soll. Mögliche Werte sind userSpaceOnUse und objectBoundingBox. Sie legen damit gleichzeitig fest, auf welches Koordinatensystem sich die sich die Koordinaten x1/y1 und x2/y2 beziehen. Bei Auswahl von objectBoundingBox beziehen sich die Koordinaten auf die Gruppe, in der sich das Element befindet, bei Auswahl von userSpaceOnUse auf das Element selbst.
• gradientTransform definiert Transformationen für die Anpassung des Verlaufs. Zulässig sind dabei alle Transformationen, die auch das transform-Attribut des <g>-Tags unterstützt. Sie können damit bspw. den Farbverlauf drehen.
• x1 und y1 legen die Anfangsposition für den Verlauf fest. Zwischen den durch x1/y1 und x2/y2 definierten Positionen wird ein virtueller Pfad gezeichnet, den der Verlauf einhält. Die beiden Positionen legen damit fest, wo die 0%- und 100%-Marke der <stop>-Tags liegen. Durch Auswahl geeigneter Werte können Sie die damit Richtung des Farbverlaufs auch ohne das gradientTransform-Attribut festlegen. Geben Sie Werte x1 und y1 nicht an, wird für beide ein Wert von 0% angenommen.
• Mit den Attributen x2 und y2 bestimmen Sie den Endpunkt des virtuellen Pfades. Lassen Sie die Attribute weg, wird für x2 ein Wert von 100% und für y2 ein Wert von 0% angenommen.

Hinweis:
Für die Attribute x1, x2, y1 und y2 können laut SVG-Standard sowohl absolute als auch prozentuale Werte verwendet werden. Die Angabe absoluter Werte führt jedoch dazu, dass der SVG-Viewer 2.0 das mit dem Farbverlauf gefüllte Objekt nicht anzeigt, obwohl die Dokumentation des SVG-Viewers 2.0 keine Einschränkungen hinsichtlich der Unterstützung des <linearGradient>-Tags macht. Sie sollten daher ausschließlich prozentuale Werte verwenden. Absolute Werte werden akzeptiert, wenn Sie für das Attribut gradientUnits den Wert userSpaceOnUse festlegen.

• spreadMethod legt fest, wie der Rest des Objekts gefüllt werden soll, wenn der Farbverlauf das Objekt nicht ganz ausfüllt. Definieren Sie bspw. einen Verlaufspfad von 10%/10% bis 90%/90%, wird das Objekt durch den Farbverlauf nicht komplett gefüllt. Das Attribut kann die Werte pad, reflect und repeat annehmen. pad ist die Standardeinstellung, die verwendet wird wenn Sie das Attribut weglassen. Sie bewirkt, dass die nicht gefüllten Bereiche vor der 0%-Marke mit der Anfangsfarbe des Verlaufs gefüllt werden. Die nicht gefüllten Bereiche nach der Endmarke werden dann mit der Endfarbe gefüllt. Der Wert reflect bewirkt hingegen, dass der Farbverlauf umgekehrt und der Rest des Objekts damit gefüllt wird. Bei repeat wird der Verlauf einfach so oft wiederholt, bis das Objekt vollständig gefüllt ist.
• xlink:href definiert einen Verweis auf einen definierten Verlauf, der in die Verlaufsdefinition einbezogen wird. Möchten Sie bspw. mehrere Verläufe definieren, die zwar alle die gleichen Farben und stop-Positionen verwenden, aber unterschiedliche Attribute, können Sie dazu zunächst einen einfachen Verlauf definieren und diesen mit Hilfe des xlink:href-Attributs in den anderen Verläufen referenzieren.

   

<< zurück

vor >>