SVG-Pfad
Beschreibung des <path>-Elements
Das SVG <path>-Element definiert einen Pfad.
Pfade werden verwendet, um komplexe Formen zu erstellen, die mehrere gerade oder gekrümmte Linien kombinieren. Komplexe Formen, die nur aus geraden Linien bestehen, können als Polylinien erstellt werden. Polylinien und Pfade erzeugen ähnliche Formen. Allerdings benötigen Polylinien kleinere gerade Linien, um Kurven zu simulieren.
Das Erstellen komplexer Pfade mit einem XML- oder Texteditor wird nicht empfohlen, da das Verständnis ihrer Funktionsweise dabei hilft, Anzeigeprobleme in SVGs zu erkennen und zu beheben.
Die Form eines Pfad-Elements wird durch einen Parameter festgelegt: d, der andere Befehle und Parameter enthält, die von diesen Befehlen verwendet werden. Die Liste der Befehle finden Sie unten:
- M = moveto
- L = lineto
- H = horizontal lineto
- V = vertical lineto
- C = curveto
- S = smooth curveto
- Q = quadratische Bézier-Kurve
- T = glatte quadratische Bézier-Kurve
- A = elliptischer Bogen
- Z = closepath
Alle diese Befehle können auch in Kleinbuchstaben ausgeführt werden. Großbuchstaben bedeuten eine absolut positionierte Form, während Kleinbuchstaben eine relativ positionierte Form bedeuten.
Beispiel für das SVG <path>-Element:
Beispiel für das SVG <path>-Element
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="300" height="250">
<path d="M190 40 L115 240 L265 240 Z" />
Sorry, inline SVG is not supported by your browser..
</svg>
</body>
</html>Practice
Welche Befehle werden in der 'd'-Eigenschaft eines SVG-Pfads in HTML verwendet?