SVG-Pfad
SVG Pfad - <Pfad>
<Pfad> Element wird verwendet, um einen Weg zu definieren.
Der folgende Befehl zum Routen von Daten verwendet werden:
- 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
Hinweis: Alle oben genannten Befehle Kleinbuchstaben ermöglichen. Kapital repräsentiert die absolute Positionierung, relative Positionierung zeigt Kleinbuchstaben.
Beispiel 1
Das obige Beispiel einen Pfad definiert, der an der Position beginnt 1500, erreichte Position 75200, und dann von dort auf 225 200 im Jahr 1500 und schließlich geschlossenen Pfad.
Hier ist der SVG-Code:
Beispiele
<Pfad d = "M150 0 L75 200 L225 200 Z" />
</ Svg>
Versuchen »
Für Opera Benutzer: Ansicht SVG - Datei (Rechtsklick auf die Vorschau Quelle SVG - Grafiken).
Beispiel 2
Mit Bezier-Kurve glatte Kurve Modell, das auf unbestimmte Zeit skaliert werden kann. Unter normalen Umständen wählt der Benutzer ein oder zwei Endpunkte und zwei Kontrollpunkte. Ein Kontrollpunkt einer Bezier-Kurve, die eine quadratische Bézier-Kurve und die beiden Kontrollpunkte genannt werden Würfel genannt.
Im folgenden Beispiel wird eine quadratische Bezier-Kurven A und C sind die Start- und Endpunkte, B ein Kontrollpunkt:
Hier ist der SVG-Code:
Beispiele
<Pfad id = "lineAB" d = "M 100 350 l 150 -300" stroke = "red"
stroke-width = "3" füllen = "none" />
<Pfad id = "lineBC" d = "M 250 50 l 150 300" stroke = "red"
stroke-width = "3" füllen = "none" />
<Pfad d = "M 175 200 l 150 0" stroke = "grün" stroke-width = "3"
füllen = "none" />
<Pfad d = "M 100 350 q 150 -300 300 0" Schlaganfall = "blue"
stroke-width = "5" füllen = "none" />
<! - Mark relevanten Punkte ->
<G Hub = "black" stroke-width = "3" fill = "black">
<Kreis id = "pointA" cx = "100" cy = "350" r = "3" />
<Kreis id = "pointB" cx = "250" cy = "50" r = "3" />
<Kreis id = "pointC" cx = "400" cy = "350" r = "3" />
</ G>
<! - Die Punkte Etikett ->
<G font-size = "30" font = "sans-serif" füllen = "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>
Versuchen »
Für Opera Benutzer: Ansicht SVG - Datei (Rechtsklick auf die Vorschau Quelle SVG - Grafiken).
Kompliziert? Ja! ! Denn wenn der Weg Komplexität zeichnen, ist es dringend zu verwenden SVG Editor empfohlen, um komplexe Grafiken erstellen.