SVG-Pfad - <Pfad>
Der <path> Element wird verwendet , um einen Pfad zu definieren.
Die folgenden Befehle sind für Pfaddaten zur Verfügung:
- M = moveto
- L = lineto
- H = horizontal lineto
- V = vertikale lineto
- C = curveTo
- S = glatt curveTo
- Q = quadratische Bézierkurve
- T = glatte quadratische Bezier curveTo
- A = elliptischen Bogen
- Z = closePath
Note: Alle oben genannten Befehle können auch mit niedrigeren Buchstaben ausgedrückt werden. Großbuchstaben bedeutet absolut positioniert ist, bedeutet das untere Gehäuse relativ positioniert.
Beispiel 1
Das Beispiel definiert unten einen Pfad, der an der Position beginnt 150,0 mit einer Linie von dort 75.200 dann zu positionieren, eine Linie zu 225.200 und den Weg schließlich Schließung zurück zu 150,0:
Hier ist der SVG-Code:
Beispiel
<svg height="210" width="400">
<path d="M150 0 L75 200 L225 200 Z" />
</svg>
Versuch es selber " Beispiel 2
Bezier-Kurven werden verwendet, glatte Kurven zu modellieren, die auf unbestimmte Zeit skaliert werden kann. Im Allgemeinen wählt der Benutzer zwei Endpunkten und einem oder zwei Kontrollpunkte. Eine Bezier-Kurve mit einem Kontrollpunkt wird eine quadratische Bézier-Kurve und die Art mit zwei Kontrollpunkte genannt wird Kubik genannt.
Das folgende Beispiel eine quadratische Bézier-Kurve erzeugt, wobei A und C die Start- und Endpunkte sind, B ist der Steuerpunkt:
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>
Versuch es selber " Komplex? JA!!!! Aufgrund der in der Zeichnung Pfade beteiligt Komplexität ist es sehr empfehlenswert, einen SVG-Editor zu verwenden, um komplexe Grafiken zu erstellen.