Komplexere Objekte zeichnen

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

Sie können natürlich auch verschiedene Anweisungen zum Erstellen von Pfaden kombinieren und so komplexere Elemente zeichnen. Nachfolgend soll eine kleine stilisierte Krone entstehen, die sich nach Fertigstellung wie folgt präsentiert.

Zu erstellende Kronen-Zeichnung

Abbildung: Zu erstellende Kronen-Zeichnung.

Alles was Sie dazu brauchen, ist eine Reihe von L-Anweisungen und eine Kurve für den Abschluss. Die Punkte können Sie separat über <circle>-Tags erstellen.

<?xml version="1.0" standalone="no"?>
...
<svg width="500" height="500">
  <g transform="translate(70,70)">
    <path style="stroke:rgb(0,0,0);fill:none;stroke-width:2" d="M0 15 l0 -15 l-10 -30 l+20 +30 l+10 -40 l+10 +40 l+20 -30 l-10 +30 l0 +15 a30 10 0 0 0 -40 0"/>
    <circle cx="-20" cy="-40" r="3" />
    <circle cx="20" cy="-50" r="3" />
    <circle cx="56" cy="-40" r="3" />
  </g>
</svg>

Im Prinzip verwendet der eingesetzte Pfad einfach mehrere Befehle nacheinander. Nach Definition der Startposition werden zunächst mit der line-Anweisung die geraden Linien der Krone erstellt und dann ein A-Befehl für die abschließende gebogene Linie erstellt. Die folgende Abbildung zeigt die Reihenfolge der Befehle im <path>-Tag.

Aufbau des Kronen-Pfades aus einzelnen Anweisungen

Abbildung: Aufbau des Kronen-Pfades aus einzelnen Anweisungen.

Im A-Befehl können Sie ebenfalls relative Koordinaten angeben, wie das Beispiel zeigt. Sie müssen dann auch "a" anstelle von "A" verwenden und können die Koordinaten mit Vorzeichen versehen. Hier ist allerdings zu beachten, dass die Angaben zu Radius und Drehung der Ellipse immer absolut sind, da sie sich ja nicht auf eine Position beziehen.

Hinweis:
Sie können die Krone dann zusammen mit den Punkten mit einem <g>-Tag gruppieren und dann beliebig positionieren. Das funktioniert problemlos, weil ausschließlich relative Koordinaten verwendet wurden.

Pfade formatieren

Grundsätzlich gilt, dass für Pfade die gleichen Formatierungen verwendet werden können, wie für andere Tags. Sie können also auch für Pfade Füllfarben oder Farbverläufe bestimmen oder Licht- und Schatteneffekte einsetzen.

Hinweis:
Wie Sie Licht- und Schatteneffekte definieren und einsetzen oder Farbverläufe festlegen, wird unter Filter, Transformationen und Farbverläufe beschrieben.

   

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