Pfade

Pfad-Grafik Als Pfad (engl. path) bezeichnet man den Weg von Linien und Kurven. Pfade erlauben es daher, also sozusagen formfrei, etwas zu zeichnen. Als Grundlage zum Zeichnen dienen Linien und Kurven. Einige werden den Begriff Pfad vielleicht aus Bildbearbeitungsprogrammen kennen. Ein Pfad wird über das Element path definiert. Um Pfade zu zeichnen, gibt es verschiedene Kommandos, diese werden als Kette inkl. der jeweiligen Kommando-Werte im Attribut d angegeben. Die folgende Tabelle zeigt eine Auflistung der Pfad-Kommandos:

M x y	Setzt den „Cursor“ an die angegebene Position.
L x y	Zeichnet an die Linie zu der angegebenen Position.
H x	Zeichnet eine horizontale Linie zu der angegebenen X-Position (Wert der Y-Achse bleibt gleich).
V y	Zeichnet eine vertikale Linie zu der angegebenen Y-Position (Wert der X-Achse bleibt gleich).
C x1 y1 x2 y2 x y	Zeichnet eine kubische Kurve zu der angegebenen Position (x1, y1, x2 und y2 sind die Koordinaten der zwei Kontrollpunkte).
S x2 y2 x y	Zeichnet eine kubische Kurve zu der angegebenen Position (x2 und y2 sind die Koordinaten des zweiten Kontrollpunkts). Als erster Kontrollpunkt wird die „Spiegelung“ des zweiten Kontrollpunkts der vorherigen Kurve verwendet.
Q x1 y1 x y	Zeichnet eine quadratische Kurve zu der angegebenen Position (x1 und y1 sind die Koordinaten des Kontrollpunkts).
T x y	Zeichnet eine quadratische Kurve zu der angegebenen Position. Als Kontrollpunkt wird die Spiegelung des Kontrollpunkts der vorherigen Kurve verwendet.
A rx ry rotate large sweep x y	Zeichnet einen Bogen (an Hand zweier Ellipsen) zu der angegebenen Position (rx und ry sind der Radius). Über rotate lässt sich der Bogen drehen. large ist ein Flag, welches festlegt, ob der Bogen größer ist als 180° (1) oder nicht (0). sweep ist ebenfalls ein Bit und legt fest, ob bei einem negativen (1) oder positiven Winkel (0) begonnen werden soll zu zeichnen (hierdurch erfolgt „die Auswahl der Ellipse“).
Z	Schließt den Pfad (gerade Linie von der aktuellen Position zur Startposition).

Übrigens: Möchten Sie keine absolute Positionierung durchführen, sondern eine relative Positionierung in Bezug auf den letzten Punkt, dann müssen Sie als Kommandobuchstaben einfach einen Kleinbuchstaben verwenden (z. B. m statt M).

Bildquelle: Vektor-Grafik von Freepik

Im folgenden Beispiel wird zu allererst eine gerade Linie gezeichnet. Anschließend werden vier kubische Kurven gezeichnet, um eine Art Sinuswelle auf der Achse darzustellen:

<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 600 400">
    <path d="M 25 200 L 575 200 M 60 200 C 100 300 140 300 180 200 C 220 100 260 100 300 200 C 340 300 380 300 420 200 C 460 100 500 100 540 200" fill="none" stroke="blue" />
</svg>

Wichtig: Wenn Sie das obige Beispiel oder die Tabelle nicht gleich verstehen, ist das völlig normal. Probieren Sie einfach die verschiedenen Kommandos selbst aus und Sie werden die Funktionsweise besser verstehen.

Übrigens: Pfade besitzen standardmäßig eine Füllfarbe (i. d. R. black, also schwarz). Um die Füllfarbe zu entfernen, können Sie einfach den Wert none oder transparent im fill-Attribut angeben.