Eine einfache Linie als Pfad erstellen

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

Pfade werden mit dem <path>-Tag erstellt. Über das Attribut d werden die Koordinaten für den Pfad übergeben. Sie können aus beliebig vielen Koordinatenpaaren bestehen und bei Kurven auch weitere Angaben, wie Radius oder Winkel enthalten.

Jeder Wert oder ein Wertepaar in einem Pfad wird dazu durch einen speziellen Befehl eingeleitet. Dies soll an einem ersten Beispiel verdeutlicht werden. Das folgende Listing zeichnet eine einfache Linie, vom Punkt 100/100 zum Punkt 200/100. Die Linie ist also 100 Pixel lang und verläuft waagerecht.

Abbildung: Ergebnis des Listings - einfache Linie als Pfad.

Der <path>-Tag hat wie der <rect>- und der <circle>-Tag kein Abschluss-Tag und wird daher mit /> beendet. Das Attribut d enthält die Daten. Diese beginnen grundsätzlich mit dem M-Befehl. Er ist die Abkürzung für Move und legt den Anfangspunkt des Pfades fest. Dieser wird nach M immer mit den Werten für die X- und Y-Koordinate definiert. Im Beispiel wird mit M100 100 also der Punkt 100/100 im Koordinatensystem als Startpunkt definiert. Ausgehend vom Startpunkt können in Pfaden nun Kurven oder Linien gezeichnet werden. Eine Linie wird bspw. mit der L-Anweisung erzeugt, danach ist der Endpunkt der Linie wieder mit X- und Y-Koordinate anzugeben, hier ist dies also 200/100. Es gibt allerdings noch weitere Befehle, die Linien zeichnen. Details folgen.

Hinweis:
Anders als bei den anderen bisher verwendeten Elementen, müssen Sie beim <path>-Tag das style-Attribut und die Füll- oder Linienfarbe angeben, damit der Pfad sichtbar ist. Ohne style-Angabe wird der Pfad unsichtbar erstellt.