Komplexe Pfade

Komplexere Linienzüge und geschlossene Figuren lassen sich mit dem <path>-Element und einer Aneinanderreihung der Befehle L/l (“Linie nach”), H/h (“horizontale Linie nach”) und V/v (“vertikale Linke nach”) im Attribut d erstellen.

Großbuchstaben geben dabei an, dass die nachfolgende Koordinate als absoluter Wert innerhalb des Shapes interpretiert werden soll, während Kleinbuchstaben die Koordinate relativ zur vorausgehenden Koordinate beschreiben.

Die x- und y-Werte werden jeweils durch einen Leerschlag oder ein Komma getrennt. Vor und nach einem Buchstaben ist ein solches Trennzeichnen optional.

Diagonale Linie

<path d="M10 10 L90 90" stroke="#01b8aa" />

<path d="M10 10 l80 80" stroke="#01b8aa" />
../../../_images/line-diagonal.png

Horizontale Linie

<path d="M10 50 H90" stroke="#01b8aa" />

<path d="M10 50 h80" stroke="#01b8aa" />
../../../_images/line-horizontal.png

Vertikale Linie

<path d="M50 10 V90" stroke="#01b8aa" />

<path d="M50 10 v80" stroke="#01b8aa" />
../../../_images/line-vertical.png

Kombination

<path stroke="#00B7A9" d="M80,45v45H61.25V63.75h-22.5V90H20V45l30-30L80,45z" />
../../../_images/path.png

Bemerkung

Für sehr komplexe Pfade empfehlen wir, ein externes Programm zu verwenden und Ihre Grafiken anschließend als SVG zu exportieren, beispielsweise Adobe Illustrator, Affinity Designer oder Inkscape.