Suche…
Einführung
Pfade sind das flexibelste Element von SVG. Ein Pfad besteht aus einer Reihe von kubischen oder quadratischen Bezier-Kurven, die in verbundenen Splines angeordnet sind. Ein Pfad kann offen oder geschlossen in einer Schleife sein oder er kann mit mehreren Unterkomponenten komplex sein. Wenn ein Pfad nicht einfach ist, ist die Füllregel wichtig, um zu entscheiden, welche Bereiche innerhalb oder außerhalb des Pfads liegen.
Pfade werden normalerweise von automatischen Editoren generiert. Typischerweise werden für Schriftarten quadratische Pfade und für Illustrationen kubische Pfade verwendet.
Parameter
| Attribute / Parameter | Beschreibung |
|---|---|
| d | Definiert eine Folge von Zeichenbefehlen, die die Form erstellen. zB d = "M 50,60 L50,60". Zeichnungsbefehle in Großbuchstaben bezeichnen absolute Koordinaten. Zeichnungsbefehle in Kleinbuchstaben bezeichnen relative Koordinaten. |
| (...) | Zeichnungsbefehle |
| m / m | Aktuelle Zeichnungsposition nach XY verschieben d = "M XY" |
| l / l | Zeichne eine Linie zu X, Y d = "L XY" |
| v / V | Zeichne eine vertikale Linie zu Y d = "V Y" |
| h / h | Zeichne eine horizontale Linie zu X d = "H X" |
| a / A | Zeichnen Sie einen Bogen nach X, Y mit einem implizierten Radius von Rx und Ry und einer durch X-Achsen-Rotation festgelegten Drehung. Die großen Bogen- und Sweep-Flags legen fest, welcher der 4 möglichen Bögen, die diese Bedingungen erfüllen, gezeichnet werden soll. d = "A Rx Ry X-Achsendrehung (Grad) Wobbelflag mit großem Bogen (0/1) (0/1) X, Y". |
| q / Q | Zeichne eine quadratische Bezier-Kurve mit dem Kontrollpunkt X1Y1 nach X, Y d = "X1Y1 X Y" |
| t / t | Zeichne eine quadratische Bezierkurve (der Kontrollpunkt wird als Reflexion des Kontrollpunkts des vorherigen q / Q-Zeichnungsbefehls durch die aktuelle Zeichnungsposition berechnet). |
| c / c | Zeichnen Sie eine kubische Bezierkurve mit den Steuerpunkten X1, Y1 und X2, Y2 d = "C X1Y1, X2Y2, XY" nach X, Y. |
| s / S | Zeichnen Sie eine kubische Bezierkurve (der erste Kontrollpunkt wird als Reflexion des zweiten Kontrollpunkts des vorherigen c / C-Zeichenbefehls durch die aktuelle Zeichnungsposition berechnet). |
| - z / Z | Schließen Sie den Pfad, indem Sie eine Linie an den Anfang des Pfades ziehen (oder ein Pfadsegment, wenn zuvor ein anderes Z verwendet wurde). |
| (...) | (Ende der Liste) |
| Pfadlänge | (Optional) Ermöglicht dem Autor die Angabe einer nominalen Pfadlänge, die für die Kalibrierung in anderen Berechnungen verwendet wird, beispielsweise für Text entlang eines Pfads |
| Strichparameter | unter allen Form- und Zeichnungselementen gemeinsam |
| Schlaganfall | Farbe des Pfades |
| Strichbreite | Breite des Pfads |
Bemerkungen
Detaillierte Informationen über das SVG - path in der gefunden werden W3C - Empfehlung für SVG .
Zeichnen Sie eine diagonale blaue Linie mit dem Befehl L path
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M 10,10 L 100,50" stroke="blue" stroke-width="5" />
</svg>
Ergebnis:
Zeichnen Sie eine horizontale orange Linie mit dem Zeichnungsbefehl H
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M 10,10 H 200" stroke="orange" stroke-width="5" />
</svg>
Ergebnis:
Zeichnen Sie ein rotes Kreuz mit den Pfadbefehlen l (relative Linie)
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M 10,10 l 90,90 M 100,10 l -90,90" stroke="red" stroke-width="10" />
</svg>
Ergebnis:
Zeichnen Sie eine vertikale grüne Linie mit dem Befehl V path
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M 10,10 V 200" stroke="green" stroke-width="5" />
</svg>
Ergebnis:
Modified text is an extract of the original Stack Overflow Documentation
Lizenziert unter CC BY-SA 3.0
Nicht angeschlossen an Stack Overflow