Radiale Verläufe

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

Wenn Sie radiale Verläufe definieren möchten, verwenden Sie dazu den <radialGradient>-Tag. Er verfügt über 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 Koordinaten cx/cy und fx/fy beziehen. Bei Auswahl von objectBoundingBox beziehen sich die Koordinaten auf die Gruppe, in der sich das Element befindet, bei Auswahl von userSpaceOnUse auf das Elements selbst. Das folgende Bespiel verdeutlich den Einsatz dieses Attributs.
  • 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.
  • cx, cy und r legen zusammen den größten Kreis des Farbverlaufs fest. Dessen Position entspricht der 100%-Marke des Verlaufs. Dabei bestimmen cx/cy den Mittelpunkt des Kreises und r den Radius. Wenn Sie die Attribute nicht angeben, bekommen alle den Wert 50%. Der Wert für den Radius muss immer dann ein prozentualer Wert sein, wenn auch cx/cy als prozentuale Werte angegeben werden.
  • fx und fy bestimmen den Fokus des Verlaufs, der der 0%-Marke entspricht. Sowohl für cx/cy als auch für fx/fy können numerische oder prozentuale Werte festgelegt werden. Geben Sie die Werte nicht an, bekommen sie automatisch die Werte von cx/cy. Damit liegt dann der Fokus des Verlaufs in der Mitte des größten Kreises.
  • 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 wird 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. Die Anwendung erfolgt genauso, wie bei den linearen Verläufen schon gezeigt.

Hinweis:
In einem <linearGradient>-Tag können Sie natürlich nur lineare Verläufe und in einem <radialGradient>-Tag nur radiale Verläufe referenzieren.

In der folgenden Abbildung sehen Sie einige Variationen des radialen Farbverlaufs. Den Beschriftungen können Sie die besonderen Einstellungen entnehmen, die verwendet wurden. Der Kreis kennzeichnet den mit cx, cy und r definierten äußeren Ring, der Punkt den Fokus, der mit fx/fy definiert wurde.

Verschiedene radiale Farbverlaufsvarianten

Abbildung: Verschiedene radiale Farbverlaufsvarianten.

   

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema SVG bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright © verlag moderne industrie GmbH 2001
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "Das Einsteigerseminar SVG — Webgrafiken mit XML" denselben Bestimmungen wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

verlag moderne industrie GmbH, Justus-von-Liebig-Straße 1, D-86899 Landsberg/Lech, fon ++49 (0) 81 91 / 125 – 0, leserservice(at)mi-verlag.de