Unter den SVG-Formtags ist der Pfad der mächtigste, und der Mastering-Pfad reicht aus, um gängige Zeichenprobleme zu lösen.
Schauen wir uns zunächst die grundlegende Verwendung des Pfadtags an:
<Pfad d="M100,100 L200,200 L200,400" Füll="#333" Strich="#000" />
Das Pfad-Tag definiert den Pfad durch die Eigenschaft d, die die Information aus einer Zeichenkette definiert, und der Pfad kann auch durch die Fill- und Stroke-Attribute definiert werden, um Fill und Rand zu definieren.
Die Information des d-Attributs ist eigentlich nicht kompliziert, es besteht aus Buchstaben und Zahlen, Zahlen stehen für Koordinatenpunkte, und Buchstaben geben an, wie diese Koordinatenpunkte verbunden werden. Zum Beispiel steht im obigen Beispiel M für den Startpunkt und L für eine gerade Verbindung, sodass die Informationen von d folgendermaßen interpretiert werden können:
M100,100 -> beginnt am Koordinatenpunkt (100,100)
L200.200 -> Ziehen Sie eine gerade Linie von (100.100) bis (200.200).
L200.400 -> Ziehen Sie eine gerade Linie von (200.200) bis (200.400).
Im d-Attribut des Pfadtags gibt es insgesamt 10 Befehle, die verwendet werden können, und die folgenden 5 Befehle sind grundlegend und relativ einfach.
M bewegt sich zu (moveTo) x,y Startpunktkoordinaten
Der Z-Closepath verbindet die Start- und Endpunkte des Weges in einer geraden Linie
L Linie Zu: Der aktuelle Knoten ist in einer geraden Linie mit dem angegebenen (x,y) Knoten verbunden
H horizontale Gerade x hält die y-Koordinate des aktuellen Punktes konstant, und die x-Achse bewegt sich zu x, wodurch eine horizontale Linie entsteht
V vertikale Linie y behält die x-Koordinaten des aktuellen Punktes unverändert, und die y-Achse bewegt sich zu y, wodurch eine vertikale Linie entsteht
M und L
Schauen wir uns ein weiteres Beispiel von M und L an
<Weg d="M30,30 L170,30 L30,170 L170,170"></path>
Von Punkt A (30, 30) wird die gerade Linie zu Punkt B (170, 30) gezogen, dann geradeaus zu Punkt C (30, 170) und schließlich geradeaus zu Punkt D (170, 170) und bildet schließlich einen Z-förmigen Weg.
Fülleffekt und Z
<Pfad d="M30,30 L170,30 L30,170 L170,170 M170,90 L190,90 L190,110 L170,110Z" füll="gelb"></path>
In dieser Pfadbeschreibung gibt es zwei M, sodass in einem Pfad zwei relativ unabhängige Pfade erscheinen; der erste Pfad ist derselbe wie im obigen Beispiel, nämlich Z-förmig.
Der zweite Pfad ist ein Rechteck, wobei der Z-Befehl in der Beschreibung erscheint, was anzeigt, dass er Anfang und Ende des Pfades verbindet.
Zusätzlich definieren wir hier die Fülleigenschaft für den Pfad, und man sieht, dass der Füll unabhängig davon wirkt, ob der Pfad geschlossen ist oder nicht.
H und V
Abschließend werfen wir einen Blick auf die beiden Befehle H und V, die tatsächlich die Abkürzung des L-Befehls sind, wenn die x- oder y-Achse unverändert bleibt, sodass die folgenden beiden Enden beschrieben werden und das gezeichnete Bild dasselbe ist.
<Pfad d="M30,30 L170,30 L30,170 L170,170 M170,90 L190,90 L190,110 L170,110Z" füll="gelb"></path>
<Pfad d="M30,30 H170 L30,170 H170 M170,90 H190 V110 H170Z" füll="gelb"></path>
|
Veröffentlicht am 14.08.2017 13:15:15
|
|
|
