Den Farbverlauf einem Element zuweisen
(Auszug aus "Das Einsteigerseminar SVG — Webgrafiken mit XML" von Helma Spona)
Nun fehlt natürlich noch ein Objekt, dem Sie den Verlauf zuweisen können. Da wir einen runden Button erstellen möchten, eignet sich dazu ein Kreis, den Sie mit dem <circle>-Tag erstellen können. Um den Farbverlauf zuzuweisen, definieren Sie im style-Attribut des Kreises die fill-Eigenschaft mit fill:url(#runderVerlauf). Dabei ist runderVerlauf der Name des Farbverlaufs, den Sie im id-Attribut des Verlaufs angegeben haben.
<?xml version="1.0" standalone="no"?>
<svg>
...
<radialGradient id="runderVerlauf" cx="40%" cy="75%" r="50%">
...
</radialGradient>
<circle cx="200" cy="200" r="25" style="stroke-width:1;stroke-opacity:0.8;stroke:rgb(222,0,0);fill-opacity:1;opacity:1;fill:url(#runderVerlauf)"/>
</svg>
| 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