SVG <path>
SVG Pfad - <path>
<path> Elemente werden verwendet, um Pfade zu definieren.
Nachfolgende Befehle können für Pfaddaten verwendet werden:
- M = moveto (Bewegen zu)
- L = lineto (Linie zeichnen zu)
- H = horizontal lineto (Horizontale Linie zu)
- V = vertical lineto (Vertikale Linie zu)
- C = curveto (Kurve zu)
- S = smooth curveto (Glatte Kurve zu)
- Q = quadratic Bézier curve (Quadratische Bézier-Kurve)
- T = smooth quadratic Bézier curveto (Glatte Quadratische Bézier-Kurve)
- A = elliptical Arc (Ellipsenbogen)
- Z = closepath (Pfad schließen)
Hinweis: Alle oben genannten Befehle können auch in Kleinbuchstaben angegeben werden. Großbuchstaben stellen absolute Positionen dar, Kleinbuchstaben stellen relative Positionen dar.
Beispiel 1
Im folgenden Beispiel wird ein Pfad definiert, der von der Position 150,0 startet, dann eine Linie zur Position 75,200 zieht, von dort eine Linie zur Position 225,200 zieht und schließlich den Pfad zum Punkt 150,0 schließt.
Dies ist der SVG-Code:
<svg height="210" width="400"> <path d="M150 0 L75 200 L225 200 Z" /> </svg>
Beispiel 2
Bézier-Kurven (Bézier curves) werden zur Modellierung glatter Kurven verwendet, die sich unendlich skalieren lassen. In der Regel wählen Benutzer zwei Endpunkte und einen oder zwei Kontrollpunkte aus. Eine Bézier-Kurve mit einem Kontrollpunkt wird als quadratische Bézier-Kurve (quadratic Bézier curve) bezeichnet, eine mit zwei Kontrollpunkten als kubische.
Dieses Beispiel erstellt eine Quadratische Bézier-Kurve, bei der A und C der Anfangs- und Endpunkt sind, und B der Kontrollpunkt:
Dies ist der SVG-Code:
<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" />
<!-- 标记相关的点 -->
<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>
<!-- 给点添加标签 -->
<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>
Sehr komplex? Ja!!! Da das Zeichnen von Pfaden sehr komplex ist, wird dringend empfohlen, einen SVG-Editor zu verwenden, um komplexe Grafiken zu erstellen.
