Ein Dreieck zeichnen

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

Wenn Sie ein Dreieck erstellen möchten, benötigen Sie dazu drei Linien und drei Koordinaten, zwischen denen die Linien erstellt werden. Mit dem SVG-Tag

<path d="M100 100 L150 200 L50 200 L100 100" style="stroke:rgb(255,0,0);fill:none"/>

wird ein gleichschenkliges Dreieck erstellt, das 100 Pixel breit und 100 Pixel hoch ist und dessen obere Ecke die Position 100/100 hat. Das Ergebnis sieht im Browser wie folgt aus:

Gezeichnetes Dreieck, ergänzt um die Koordinaten der Ecken

Abbildung: Gezeichnetes Dreieck, ergänzt um die Koordinaten der Ecken.

Hinweis:
Wenn Sie einen Pfad erstellen, dessen Umrandung Sie sichtbar formatieren und der mindestens einen Winkel bildet, wird der Pfad automatisch mit der Farbe der Umrandung gefüllt. Wenn die Füllung nicht gewünscht ist, müssen Sie dies explizit durch Angabe von fill:none im style-Attribut bestimmen.

Die Linie besteht im Prinzip aus den gleichen Anweisungen, wie Sie zuvor schon für die Linie verwendet wurden. Mit M100 100 wird wieder die Anfangsposition bestimmt, die Endposition der ersten Linie 150/200 wird mit L150 200 definiert. Dies ist gleichzeitig die Anfangsposition der nächste Linie, zum Punkt 50/200. Von dort aus wird die dritte Linie wieder zum Anfangpunkt des Dreiecks gezeichnet, die das Dreieck schließt.

So gesehen ist es gar nicht schwer, auch komplexe Formen zu zeichnen, solange deren Koordinaten bekannt sind. Allerdings kann das schon mal dazu führen, dass die Anzahl der Koordinaten sehr zahlreich ist. Wenn Sie dann versuchen, den Pfad an eine andere Position in der Grafik zu verschieben, müssen alle diese Koordinaten geändert werden.

Hinweis:
Sie haben natürlich auch bei Pfaden die Möglichkeit, diese zu gruppieren und mit dem transform-Attribut zu verschieben. Außerdem können Sie natürlich auch das transform-Attribut direkt im <path>-Tag verwenden.

Die Lösung für dieses Problem ist es, relative Koordinaten zu bestimmen. Absolut wird dann nur die Anfangskoordinate mit der M-Anweisung festgelegt, alle anderen bezeichnen nur positive und negative Abweichungen von diesem Anfangspunkt bzw. dem Endpunkt der vorherigen Linie.

Hinweis:
Wenn Sie WebDraw benutzen und relative Pfade eingeben, werden diese beim Wechseln in die Layoutansicht immer in absolute Pfade konvertiert. Das ist zwar kein Problem, da WebDraw Ihnen die Möglichkeit bietet, die Elemente per Drag&Drop zu positionieren. Allerdings ist dies natürlich sehr lästig, wenn Sie die Verwendung von relativen Pfaden testen möchten. Daher sollten Sie gegebenenfalls dazu einen einfachen Texteditor verwenden.

Das gleiche Dreieck mit relativen Koordinaten wird mit folgendem Tag erzeugt:

<path d="M100 100 l50 100 l-100 0 l50 -100" style="stroke:rgb(255,0,0);fill:none"/>

Dabei wird der Anfangspunkt wieder mit M100 100 bestimmt. Danach folgt wieder die L-Anweisung, mit dem Unterschied, dass Sie bei relativen Positionen die Kleinbuchstaben für die Anweisungen verwenden. Statt L geben Sie also l und danach die Abweichungen von der Anfangsposition an. Zur X-Koordinate werden also 50 Pixel addiert, zur Y-Koordinate 100. Das ergibt dann ausgehend vom Anfangspunkt wieder die Position 150/200.

Negative Werte führen dazu, dass vom aktuellen Wert die angegebene Anzahl Pixel oder Maßeinheiten abgezogen wird. Das Minuszeichen muss dazu vor der Zahl angegeben werden und zwischen Minuszeichen und Zahl darf auf keinen Fall ein Leerzeichen stehen. Die folgende Grafik verdeutlich die Verwendung relativer Positionen.

Zeichnen eines Dreiecks mit relativen Koordinaten

Abbildung: Zeichnen eines Dreiecks mit relativen Koordinaten.

Da ein solcher Pfad mit relativen Koordinaten nur durch die Anfangsposition absolut positioniert wird, können Sie jederzeit die Anfangsposition ändern, ohne alle weiteren Koordinaten neu berechnen zu müssen.

   

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