SVG <path> Pfad

Das <path>-Element ist ein universelles Element zur Definition von Formen. Alle grundlegenden Formen können mit dem <path>-Element erstellt werden. Das SVG <path>-Element wird verwendet, um fortgeschrittene Formen zu zeichnen, die aus Linien, Kurven, Arcs und anderen Komponenten bestehen, mit oder ohne Füllung. Dieses <path>-Element könnte das fortschrittlichste und universellste SVG-Formelement sein und ist möglicherweise auch das schwerste zu beherrschende Element.

SVG Online-Editor -　 SVG kann online bearbeitet werden und kann in Quellcode umgewandelt werden

Pfadbeispiel

SVG <path> Einfaches Beispiel:

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<path　d="M50,50
　　　　　　　　　　　　　A30,30 0 0,1　35,20
　　　　　　　　　　　　　L100,100
　　　　　　　　　　　　　M110,110
　　　　　　　　　　　　　L100,0"
　　　　　　　　　　style="stroke:#660000; fill:none;"/>　　　　
</svg>

Das Ergebnis nach dem Ausführen ist wie folgt:

Beachten Sie, wie das Bild eine Bogen und zwei Linien enthält und wie die zweite Linie nicht mit dem ersten Bogen und der ersten Linie verbunden ist.

Alle Zeichnungen mit dem <path>-Element werden im d-Attribut angegeben. Das d-Attribut enthält Zeichnungsbefehle. In dem obigen Beispiel steht M für "Move to" (Bewegen zu), A für "Arc" (Bogen), L für "Line" (Linie). Diese Befehle werden dem "virtuellen Stift" gegeben. Dieser Stift kann bewegt und Formen gezeichnet werden.

Setzen und Bewegen des Stifts

<path>-Attribut sollte immer der move-Befehl sein. Bevor Sie etwas zeichnen können, sollten Sie den virtuellen Stift an einen bestimmten Ort bewegen. Dies wird durch den M-Befehl erreicht. Ein einfaches Beispiel ist:

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<path　d="M50,50"
　　　　　　　　　　style="stroke:#660000; fill:none;"/>
</svg>

Dieser Beispiel bewegt den virtuellen Stift zu50,50Punkt. Der nächste Zeichnungsbefehl beginnt von diesem Punkt.

Linie

Eine Linie zu zeichnen ist möglicherweise der einfachste Befehl, den Sie einem <path>-Element geben können. Mit den Befehlen L und l (klein geschriebener L) wird das Zeichnen einer Linie durchgeführt:

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<path　d="M50,50　　　　　　　　　　　　　L100,100"
　　　　　　　　　　style="stroke:#660000; fill:none;"/>
</svg>

Dieser Beispiel von Punkt50,50 (Punkt des M-Befehls) bis zum Punkt100,100 (Punkt des L-Befehls) eine Linie zeichnet. Nach der Ausführung das Bildergebnis:

Der Unterschied zwischen den Befehlen L und l besteht darin, dass die Großbuchstabenversion (L) eine Linie bis zum absoluten Punkt zeichnet, der dem Befehl übergeben wird, während die Kleinbuchstabenversion (l) eine Linie bis zum relativen Punkt zeichnet, der dem Befehl übergeben wird. Der relative Punkt ist der Punkt, der sich vor dem Beginn der Zeile befindet, plus die Koordinaten des gegebenen l-Befehls.
Wenn der virtuelle Stift50,50, und Sie verwenden l100,100Befehl gezeichnet, wird die Linie50+100,50+100=150,150. Unabhängig davon, wo sich der virtuelle Stift befindet, wird eine Linie mit L100,100Befehl kann eine genaue Linie zeichnen100,100。

Der Zeichnungsbewegung des virtuellen Stifts

Die Zeichnungsform wird immer von dem letzten virtuellen Stiftspunkt bis zum neuen Punkt gezeichnet. Jeder Zeichnungsbefehl hat einen Endpunkt. Nach Ausführung dieses Befehls wird der virtuelle Stiftspunkt am Ende dieses Zeichnungsbefehls stehen. Der nächste Zeichnungsbefehl beginnt von diesem Punkt.

Bogen

Der Zeichnung eines Kreiszugs mit dem <path>-Element wird durch die A- und a-Befehle durchgeführt. Wie bei Geraden, verwendet der Großbuchstabenbefehl (A) absolute Koordinaten als seinen Endpunkt, während der Kleinbuchstabenbefehl (a) relative Koordinaten (relativ zum Ausgangspunkt) verwendet. Ein Beispiel ist:

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<path　d="M50,50　　　　　　　　　　　　　A30,50 0 0,1　100,100"
　　　　　　　　　　style="stroke:#660000; fill:none;"/>
</svg>

Das Ergebnis nach dem Ausführen ist wie folgt:

Dieser Beispiel von Punkt50,50 bis zum Punkt100,100 (im letzten指定的A-Befehl) ein Bogen gezeichnet.
Der Radius des Kreises wird durch die ersten beiden Parameter, die im A-Befehl eingestellt sind, festgelegt. Der erste Parameter ist rx (der Radius in der x-Richtung), der zweite Parameter ist ry (der Radius in der y-Richtung). Wenn rx und ry auf denselben Wert gesetzt werden, wird ein Kreiszug erzeugt. Wenn rx und ry auf verschiedene Werte gesetzt werden, wird ein Ellipsenzug erzeugt. In dem obigen Beispiel ist rx auf30, ry wird50。
Der dritte Parameter, der auf dem Befehl A gesetzt wird, ist die Rotation der x-Achse (x-achse-rotation). Im Vergleich zum normalen x-Achsen, wird dies die Rotation der x-Achse des Bogens einstellen. In dem obigen Beispiel ist die Rotation der x-Achse auf 0 gesetzt. In den meisten Fällen müssen Sie diesen Parameter nicht ändern.

und die vierten und fünften Parameter sind das Flag für den großen Bogen (large-arc-flag) und dem Scan-Flag (sweep-flag) Parameter. Das Flag für den großen Bogen (large-arc-flag) entscheidet, ob ein kleinerer oder größerer Bogen gezeichnet wird, der die Ausgangs- und Endpunkte sowie rx und ry erfüllt. Hier ist ein Beispiel für die Zeichnung4Beispiel, jeder Bogen hat ein Flag für den großen Bogen (large-arc-flag) und dem Scan-Flag (sweep-verschiedene Kombinationen des Flags

<svg　width="500"　height="120">
　　　　<path　d="M40,20 A30,30 0 0,0　60,70" style="stroke: #cccc00; stroke-width:2; fill:none;"></path>
　　　　<path　d="M40,20 A30,30 0　1,0　60,70" style="stroke: #ff0000; stroke-width:2; fill:none;"></path>
　　　　<path　d="M40,20 A30,30 0　1,1　60,70" style="stroke: #00ff00; stroke-width:2; fill:none;"></path>
　　　　<path　d="M40,20 A30,30 0 0,1　60,70" style="stroke: #0000ff; stroke-width:2; fill:none;"></path>
</svg>

Das Ergebnis nach dem Ausführen ist wie folgt:

kann von40,20 bis zum Punkt60,70 vier verschiedene Bögen zeichnen. Ein langer Bogen, ein kurzer Bogen und jeder kurze/Die beiden Spiegelformen des großen Bogens. Das Flag für den großen Bogen bestimmt, ob ein großer oder kleiner Bogen gezeichnet wird. Das Scan-Flag bestimmt, ob der Bogen um die Achse vom Ausgangspunkt zum Endpunkt gespiegelt wird. Tatsächlich kontrolliert das Scan-Flag die Zeichnungsrichtung des Bogens (im Uhrzeigersinn oder gegen den Uhrzeigersinn), was das "Spiegelungseffekt" erzeugt.

gezeichnete erste Kreisbogen ist der gelbe Kreisbogen. Das Setzen des Flags für den großen Kreisbogen auf 0 bedeutet, dass der kleinere mögliche Kreisbogen gezeichnet wird. Das Scan-Flag wird auch auf 0 gesetzt, was bedeutet, dass der Kreisbogen nicht gespiegelt wird. Hier ist der gelbe Bogen:

gezeichnete zweite Kreisbogen ist der rote Kreisbogen. Der Flagge für den großen Kreisbogen wird auf1bedeutet, dass der größere der beiden möglichen Kreisbögen gezeichnet wird, der Bereich reicht von40,20 bis60,70 dargestellt. Hier sind die gelben und roten Bögen gemeinsam dargestellt, um die Unterschiede zu verdeutlichen:

grüne und blaue Bögen (aus den vier Kreisbögen des obigen Beispiels) sind gleich den gelben und roten Bögen, aber sie werden mit dem Scan-Flag (sweep-flag) auf1Das bedeutet, dass sie den gleichen Kreisbogen zeichnen, aber spiegeln sie sich auf der Achse zwischen dem Ausgangspunkt und dem Endpunkt.

Quadratische Bézier-Kurve

Man kann die <path>-Elemente verwenden, um quadratische Bezier-Kurven zu zeichnen. Das Zeichnen quadratischer Bezier-Kurven wird durch die Befehle Q und Q durchgeführt. Wie bei Geraden, verwendet der Großbuchstabenbefehl (Q) absolute Koordinaten als seinen Endpunkt, während der Kleinbuchstabenbefehl (q) relative Koordinaten (im Vergleich zum Ausgangspunkt) verwendet. Ein einfaches Beispiel für eine quadratische Kurve ist:

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink"><path　d="M50,50　Q50,100　100,100"　
　　　　　　style="stroke:　#006666;　fill:none;"/></svg>

Das Ergebnis nach dem Ausführen ist wie folgt:

Dieser Beispiel zeichnet eine zweifache Bezier-Kurve, von50,50 bis zum Punkt100,100，Kontrollpunkt ist50,200. Kontrollpunkte sind der erste Parameter der Q-Befehle.

Kontrollpunkte ziehen die Kurve wie ein Magnet. Je näher ein Punkt auf der Kurve einem Kontrollpunkt steht, desto mehr zieht der Kontrollpunkt herein, was bedeutet, dass er näher am Kontrollpunkt ist. Hier sind einige Beispiele, wie Kontrollpunkte auf dem Bild gezeichnet werden:

Tatsächlich, wenn Sie eine Linie vom Ausgangspunkt zum Kontrollpunkt und dann eine Linie vom Kontrollpunkt zum Zielpunkt zeichnen, ist die Tangente zwischen der Mitte der ersten Linie und der Mitte der zweiten Linie die Kurve. Hier ist ein Bild, das dies zeigt:

Dreifache Bezier-Kurve

Verwenden Sie die Befehle C und c, um dreifache Bezier-Kurven zu zeichnen. Dreifache Bezier-Kurven ähneln den zweifachen Bezier-Kurven, mit dem Unterschied, dass sie zwei Kontrollpunkte statt eines haben. Wie Linien verwenden die Großbuchstabenbefehle (C) absolute Koordinaten für ihr Ziel, während die Kleinbuchstabenbefehle (c) relative Koordinaten (bezogen auf den Ausgangspunkt) verwenden:

<path　d="M50,50　C75,80　125,20　150,50"
　　　　　　style="stroke:　#006666;　fill:none;"/>

Dies ist das Ergebnis der Zeichnung der Kontrollpunkte, das nach dem Ausführen folgt.

Sie können dreifache Bezier-Kurven verwenden, um fortgeschrittene Kurven zu erstellen:

Pfad schließen

Das <path>-Element hat eine Kurzwahl, um den Pfad zu schließen, das bedeutet, eine Linie von dem letzten gezogenen Punkt zurück zum ersten Punkt zu zeichnen. Dieser Befehl ist Z (oder z)-Es gibt keinen Unterschied zwischen Großbuchstaben und Kleinbuchstaben bei den Befehlen zum Schließen des Pfades ():

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink"><path　d="M50,50　L100,50　L100,100　Z"
　　　　style="stroke:　#006666;　fill:none;"/></svg>

Das Ergebnis nach dem Ausführen ist wie folgt:

Kombinierte Befehle

Sie können Pfad-Befehle in einem <path>-Element kombinieren. Hier ist ein Beispiel:

<svg　width="500"　height="225">
　　　　<path　d="M100,100　L150,100　a50,25　0　0,0　150,100　q50,-50　70,-170　Z"　style="stroke:　#006666;　fill:　none;"></path>
</svg>

Dieser Beispiel zeichnet eine Linie, einen Bogen, eine二次Bezier-Kurve und schließt den Pfad mit einer Linie, die zum Ausgangspunkt zurückgeht. Hier ist das generierte Bild:

Pfad füllen

Sie können das fill CSS-Attribut verwenden, um den Pfad zu füllen. Hier ist ein Beispiel:

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink"><path　d="M100,100　L150,100　L150,150　Z"
　　　　　　style="stroke:　#0000cc;
　　　　　　　　　　　　　stroke-width:　2px;　　　　　　　　　　　　　fill　　:　#ccccff;"/></svg>

Das Ergebnis nach dem Ausführen ist wie folgt:

Beachten Sie bitte, wie das Innere der Form mit einem hellblauen Farbton gefüllt ist.

Markierung

Sie können auf dem <path>-Element Markierungen verwenden. Markierungen sind kleine Symbole am Anfang, in der Mitte und am Ende des Pfades, die zur Anzeige der Richtung des Pfades dienen. Zum Beispiel hat der Anfang eines Pfades einen Kreis oder einen Quadrat und das Ende einen Pfeil.

Symbol-Tastenkürzel

Falls Sie denselben Befehl mehrmals verwenden müssen, können Sie den Befehlsbuchstaben weglassen und nur eine Reihe zusätzlicher Parameter bereitstellen, wie im Beispiel gezeigt. Hier ist ein Beispiel:

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink"><path　d="M10,10　　　l100,0　　0,50　　-100,0　　0,-50"
　　　　　　style="stroke:　#000000;　fill:none;"　/></svg>

Dieser Beispiel zeigt, wie andere Parameter an den Befehl l übergeben werden, als ob jeder Parameter vor dem l steht. Dies gilt auch für andere Pfadbefehle. Hier ist das generierte Bild:

Path-Befehlsliste

Hier ist eine SVG　PfadElementListe möglicher Stiftbefehle.Jeder Befehl besteht aus einem Buchstaben und einer Gruppe von Zahlen (Koordinaten usw.), die die Parameter des Befehls sind.Groß geschriebene Befehle interpretieren die Koordinatenparameter normalerweise als absolute Koordinaten.Klein geschriebene Befehle interpretieren die Koordinatenparameter normalerweise relativ zur aktuellen Stiftposition.