Einen runden Farbverlauf definieren

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

Farbverläufe definieren Sie abhängig vom Typ des Farbverlaufs mit unterschiedlichen Tags. Sie sollten die Definition jedoch in einen <defs>-Tag einschließen und am Dokumentanfang definieren, da dies der SVG-Standard empfiehlt.

Um einen radial angelegten Farbverlauf zu definieren, verwenden Sie den <radialGradient>-Tag. Wichtig ist, dass Sie den Tag mit dem id-Attribut benennen, weil Sie den Namen benötigen, um den Verlauf einem Objekt zuzuweisen. Mit den Attributen cx, cy und r legen Sie den Aufbau des Verlaufs fest. cx und cy bestimmen die Position des Verlaufs innerhalb des zu füllenden Objekts. Mit den Parametern fx und fy legen Sie den Mittelpunkt des Verlaufs fest, also die Stelle, an der die 0%-Marke positioniert ist. Sie können hierfür sowohl absolute Werte als auch prozentuale angeben. Letztere werden für das Beispiel verwendet, da sie es ermöglichen, den Mittelpunkt relativ zur Größe des zu füllenden Objekts zu definieren. Mit dem Attribut r können Sie den Radius des Verlaufs bestimmen.

Innerhalb des Tags verwenden Sie den <stop>-Tag, um die Farbe und deren Position innerhalb des Verlaufs zu bestimmen. Grundsätzlich gilt, dass bei 0% die Mitte des Verlaufs liegt, bei 100% der Beginn. Möchten Sie einen Verlauf von Rot nach Weiß erstellen, müssen Sie die Farbe Rot für die Marke 100% festlegen und Weiß für 0%. Dazwischen definieren Sie die Übergangsfarben, wenn diese notwendig sind. Ansonsten werden die beiden Farben einfach gleichmäßig ineinander überblendet.

Der <stop>-Tag verwendet die folgenden Attribute, mit denen Sie die Eigenschaften an der entsprechenden Position festlegen können:

  • offset gibt die Position als prozentualen Wert an, bspw. mit offset="0%".
  • style definiert die Formatierung. Mit stop-color geben Sie die dazu die Farbe an der entsprechenden Position an. Deren Deckkraft legen Sie mit stop-opacity fest. Hierfür können Sie Werte zwischen 0 (vollkommen transparent) und 1 (vollkommen deckend) eintragen.

Mit der Anweisung:

<stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:1"/>

definieren Sie bspw. für die Mitte des Verlaufs die Farbe Weiß mit einer Deckkraft von 100%.

<?xml version="1.0" standalone="no"?>
...
<svg width="500" height="500">
  <radialGradient id="runderVerlauf" cx="50%" cy="90%" r="60%" fx="60%" fy="80%">
    <stop offset="0%" style="stop-color:rgb(255,150,150);stop-opacity:1"/>
    <stop offset="1%" style="stop-color:rgb(255,128,128);stop-opacity:1"/>
    <stop offset="50%" style="stop-color:rgb(255,0,0);stop-opacity:1"/>
  </radialGradient>
</svg>

   

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