Einen linearen Farbverlauf definieren und zuweisen

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

Was nun noch für das Button-Beispiel fehlt, ist eine Ellipse im oberen Teil des Kreises, die Sie mit einem linearen Farbverlauf füllen. Lineare Verläufe definieren Sie mit dem Tag <linearGradient>. Auch diesen Verlauf müssen Sie mit dem id-Attribut benennen. Die Anfangs- und Endfarbe können Sie genauso wie bei radialen Farbverläufen mit dem <stop>-Tag festlegen.

Normalerweise wird der Farbverlauf waagerecht erstellt. Sie können jedoch mit dem Attribut gradientTransform auch eine Drehung erwirken. Dazu können Sie alle Befehle verwenden, die auch für das transform-Attribut des <g>-Tags verwendet werden können. Der Befehl rotate bewirkt bspw. eine Drehung um die Klammern angegebene Gradzahl, hier also 90°.

<linearGradient id="linearerVerlauf" gradientTransform="rotate(90)">
  <stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:1"/>
  <stop offset="90%" style="stop-color:rgb(255,1,1);stop-opacity:1"/>
</linearGradient>

Diesen Verlauf müssen Sie nun einer Ellipse zuweisen, die Sie im oberen Teil des Kreises anordnen. Der dazu notwendige Code lautet:

<ellipse cx="200" cy="190" rx="20" ry="12" style="stroke-width:1;stroke:none;fill-opacity:1;opacity:1;fill:url(#linearerVerlauf)"/>

Wenn Sie den Code nun ausführen, sieht das Ergebnis schon fast perfekt aus. Nur der Schatten fehlt noch, wie Sie den erstellen, ist Thema des Abschnitts Mit Filtern Schatten und Lichteffekte definieren.

Der fast fertige Button

Abbildung: Der fast fertige Button.

   

<< 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