SVG <Pfad>
SVG-Pfad - <Pfad>
Das <path>-Element wird verwendet, um einen Pfad zu definieren.
Für Bahndaten stehen folgende Befehle zur Verfügung:
- M = moveto
- L = lineto
- H = horizontaler Strich
- V = vertikaler Strich
- C = Kurveto
- S = glatte Kurve
- Q = quadratische Bézier-Kurve
- T = glatte quadratische Bézier-Kurveto
- A = elliptischer Bogen
- Z = Nahweg
Hinweis: Alle obigen Befehle können auch mit Kleinbuchstaben ausgedrückt werden. Großbuchstaben bedeuten absolut positioniert, Kleinbuchstaben bedeuten relativ positioniert.
Beispiel 1
Das folgende Beispiel definiert einen Pfad, der bei Position 150,0 mit einer Linie zu Position 75.200 beginnt, dann von dort eine Linie zu 225.200 und schließlich den Pfad zurück zu 150,0 schließt:
Hier ist der SVG-Code:
Beispiel
<svg height="210" width="400">
<path d="M150 0 L75 200 L225 200 Z" />
</svg>
Beispiel 2
Bézier-Kurven werden verwendet, um glatte Kurven zu modellieren, die unbegrenzt skaliert werden können. Im Allgemeinen wählt der Benutzer zwei Endpunkte und einen oder zwei Kontrollpunkte aus. Eine Bézier-Kurve mit einem Kontrollpunkt wird als quadratische Bézier-Kurve bezeichnet, und die Art mit zwei Kontrollpunkten wird als kubisch bezeichnet.
Das folgende Beispiel erstellt eine quadratische Bézier-Kurve, wobei A und C die Start- und Endpunkte sind, B der Kontrollpunkt:
Hier ist der SVG-Code:
Beispiel
<svg height="400" width="450">
<path id="lineAB" d="M 100 350 l 150 -300" stroke="red"
stroke-width="3" fill="none" />
<path id="lineBC" d="M 250 50 l 150 300" stroke="red"
stroke-width="3" fill="none" />
<path d="M 175 200 l 150 0" stroke="green" stroke-width="3"
fill="none" />
<path d="M 100 350 q 150 -300 300 0" stroke="blue"
stroke-width="5" fill="none" />
<!-- Mark relevant points -->
<g stroke="black" stroke-width="3" fill="black">
<circle id="pointA" cx="100" cy="350" r="3" />
<circle id="pointB" cx="250" cy="50" r="3" />
<circle id="pointC" cx="400" cy="350" r="3" />
</g>
<!-- Label the points -->
<g font-size="30" font-family="sans-serif" fill="black" stroke="none"
text-anchor="middle">
<text x="100" y="350" dx="-30">A</text>
<text x="250" y="50" dy="-10">B</text>
<text x="400" y="350" dx="30">C</text>
</g>
</svg>
Komplex? JA!!!! Aufgrund der Komplexität beim Zeichnen von Pfaden wird dringend empfohlen, einen SVG-Editor zu verwenden, um komplexe Grafiken zu erstellen.