Diese Eigenschaft definiert einen Pfad.
Verwendung
Attribute der Kategoriepfaddefinition
Wert
Variabilität: Ja
Spezifikationsdokumentation SVG 1.1 (2. Ausgabe)
Die Eigenschaft d ist tatsächlich eine Zeichenkette, die eine Reihe von Pfadbeschreibungen enthält. Diese Wege bestehen aus folgenden Anweisungen:
- Umzug
- Lineto
- Curveto
- Arcto
- ClosePath
Diese werden in einer Reihe kombiniert. Diese verschiedenen Befehle sind groß- und kleinschreibungssensitiv; Ein Großbuchstabenbefehl zeigt an, dass seine Parameter absolute Positionen sind, während Kleinbuchstaben einen Punkt relativ zur aktuellen Position anzeigen. Ein negativer Wert kann als Parameter für den Befehl angegeben werden: Der negative Winkel ist gegen den Uhrzeigersinn, und die absoluten x- und y-Positionen werden als negative Koordinaten betrachtet. Der negative relative x-Wert bewegt sich nach links, während der negative relative y-Wert nach oben geht.
Umzug
Der Befehl "Moveto" kann man sich vorstellen, als würde man einen Zeichenstift aufheben und an einem anderen Ort landen. Zwischen dem vorherigen Punkt und diesem angegebenen Punkt wird kein Linienabschnitt gezogen. Es ist eine gute Idee, einen Pfad mit einem Moveto-Befehl zu starten, denn ohne ein initialisiertes Moveto beginnt der Ausgangspunkt die vorherige Operation, was zu unbestimmtem Verhalten führen kann.
Syntax:
M x, y sind hier x und y absolute Koordinaten, die jeweils horizontale und vertikale Koordinaten darstellen.
m dx, dy hier dx und dy sind die Abstände relativ zum aktuellen Punkt, rechts bzw. unten.
Beispiel:
An absoluter Position x=50, y= 100:<Pfad d="M50,100..." />
Bewege dich 50 nach rechts, 100 nach unten: <Weg d="m50,100..." />
Lineto
Im Gegensatz zum Moveto-Befehl zeichnet der Lineto-Befehl ein gerades Segment. Dieses gerade Liniensegment bewegt sich von der aktuellen Position zur angegebenen Position. Die Syntax des nativen Lineto-Befehls lautet "L x, y" oder "l dx, dy", wobei x und y absolute Koordinaten sind und dx und dy die Abstände rechts bzw. unten. Es gibt auch die Buchstaben H und V, die horizontale bzw. vertikale Bewegungen angeben. Sie haben dieselbe Syntax wie L, und ihre Kleinbuchstabenversion ist relative Distanz, während Großbuchstaben die absolute Position ist.
Curveto
Der Curvto-Befehl spezifiziert eine Bézier-Kurve. Es gibt zwei Arten von Bézier-Kurven: kubische und quadratische. Eine quadratische Bézier-Kurve ist eine spezielle kubische Bézier-Kurve, bei der die beiden Enden des Kontrollpunkts gleich sind. Die Syntax einer quadratischen Bézier-Kurve lautet "Q cx, cy x, y" oder "q dcx, dcy dx, dy". Cx und Cy sind beide absolute Koordinaten von Kontrollpunkten, während DCX und DCY die Entfernungen von Kontrollpunkten in der X- bzw. Y-Richtung darstellen.
Die kubische Bézier-Kurve folgt demselben Konzept wie die quadratische Bézier-Kurve, muss jedoch zwei Kontrollpunkte berücksichtigen. Die Syntax der kubischen Bézier-Kurve lautet: "C c1x, c1y c2x, c2y x, y" oder "c dc1x, dc1y dc2x, dc2y dx, dy", wobei c1x, c1y und c2x, c2y die absoluten Koordinaten der Kontrollpunkte des Start- bzw. Endpunkts sind. DC1X, DC1Y und DC2X, DC2Y sind relativ zum Startpunkt, nicht zum Endpunkt. DX und dy sind die Abstände rechts bzw. unten.
Um glatte Bézier-Kurven zu verbinden, können Sie auch die Befehle T und S verwenden. Ihre Syntax ist einfacher als bei anderen Curveto-Befehlen, weil sie davon ausgeht, dass der erste Kontrollpunkt eine Reflexion des vorherigen Kontrollpunkts des vorherigen ist oder dass es tatsächlich der vorherige Punkt ist, wenn kein vorheriger Kontrollpunkt vorhanden ist. Die Syntax von T ist "T x,y" oder "t dx,dy", was den absoluten Koordinaten bzw. den relativen Abstanden entspricht und zur Erstellung einer quadratischen Bézierkurve verwendet wird. S wird verwendet, um eine kubische Bézier-Kurve zu erzeugen, die Syntax lautet "S cx, cy x, y" oder "s dcx, dcy dx, dy", wobei (d)cx den zweiten Kontrollpunkt angibt.
Schließlich können alle Befehle der Bézier-Kurve einen mehrseitigen Bézier-Graphen erstellen, den Befehl zuerst initialisieren und dann alle Parameter mehrfach angeben, um einen mehrseitigen Bézier-Graphen zu erstellen. Daher können die folgenden beiden Befehle exakt denselben Pfad erzeugen:
Arcto
Manchmal ist es einfacher, einen Weg der elliptischen Bogenkurve zu beschreiben als einen Bézier-Kurvenpfad. Am Ende des Tages unterstützt das Pfadelement den Arcto-Befehl. Das Mittelpunkt des Bogens wird durch andere Variablen berechnet. Eine Arcto-Deklaration ist relativ eine Wiederholung von Visual Studio: "A rx, ry xAxisRotate LargeArcFlag, SweepFlag x, y". Dekonstruiert man es, sind rx und ry die Radien in der x- bzw. y-Richtung, und der Wert von LargeArcFlag ist 0 oder 1, um zu bestimmen, ob ein kleiner Bogen (0) oder ein großer Bogen (1) gezeichnet werden soll. Die SweepFlag ist ebenfalls entweder 0 oder 1, was verwendet wird, um zu bestimmen, ob der Bogen im Uhrzeigersinn (1) oder gegen den Uhrzeigersinn (0) verläuft. x und y sind die Koordinaten des Ziels. Obwohl xAxisRotate die Änderung der Orientierung der x-Achse relativ zum aktuellen Bezugssystem unterstützt, scheint dieser Parameter in Gecko 7 wenig Einfluss zu haben.
ClosePath
Der Befehl ClosePath zieht einfach eine gerade Linie vom aktuellen Punkt zum ersten Punkt des aktuellen Pfades. Es ist der einfachste Befehl und enthält keine Parameter. Er folgt dem kürzesten linearen Weg zum Startpunkt, und wenn andere Wege auf diesem Weg liegen, kreuzen sich die möglichen Pfade. Die Syntax ist "Z" oder "z", und beide Schreibmethoden haben dieselbe Funktion.
Element
Die folgenden Elemente können das d-Attribut verwenden:
Die gleichen Regeln können <animate>auf Animationspfade angewendet werden.
Erinnerung
Der Ursprung (Koordinatensystem 0,0 Punkte) ist oft die obere linke Ecke des Kontexts. <glyph>Der Ursprung des Elements befindet sich jedoch in der unteren linken Ecke seines Briefkastens.
Ein Komma ist zwischen beliebigen zwei Zahlen erlaubt, aber sonst nirgendwo.
Beispiel
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve">
<Pfadfüllung="#F7931E" d="M37,17v15H14V17H37z M50,0H0v50h50V0z"/>
</svg>
Um zu zeigen, was d="M37,17v15H14V17H37z M50,0H0v50h50V0z" eigentlich bedeutet, besprechen wir jeden Unterabschnitt dieser Zeichenkette.
d=" M37,17 || v15 || H14 || V17 || H37 || z // M50,0 || H0 || v50 || h50 || V0 || z"
d=
Diese Eigenschaft enthält die Zeichenketten, aus denen das gesamte SVG besteht.
M37,17
M ist die Abkürzung für MoveTo. Das große "M" steht für absolute Koordinaten, und das kleine "m" für relative Entfernung. Es bedeutet, dass sie auf den Startkoordinaten basiert, die Linie im Feld liegt und du in der oberen rechten Ecke des Rechtecks im Feld startest.
37 ist die Abkürzung für die Start-SVG-Position mit 37 Pixeln auf der X-Achse.
17 Start-SVG-Position bei 17 Pixeln auf der y-Achse.
v15
V steht für Vertikal. Das große V steht für absolute Koordinaten, und das kleine V für die relative Länge und Entfernung. dx/dy und x/y können an den entsprechenden Positionen von H/V und h/v verwendet werden.
Hier wird sie durch das Zeichnen einer vertikalen Linie von 15 Pixeln relativ zu einer gegebenen Koordinate dargestellt. Das bedeutet, dass du 15 Pixel bis zu den Koordinaten 37,32 zeichnest.
H14
H steht für Niveau, was absolute Koordinaten ist, weil es großgeschrieben ist.
Vom Ende von v15 zieht man eine horizontale Linie, bis die absolute Koordinate 14 erreicht ist, und beendet die Linienzeichnung, wenn sie x-Koordinate 14 erreicht. Die Striche befinden sich bei den Koordinaten 14,32.
V17
Wie zuvor beginnt man am Ende der vorherigen Linie und zieht eine vertikale Linie, bis man die y-Achsen-Koordinate 17 erreicht. Die Striche befinden sich an den Koordinaten 14,17.
H37
Ziehe schließlich ab 14,17 eine horizontale Linie, bis du die x-Achsen-Koordinate 37 erreichst. Der Schlag befindet sich bei den Koordinaten 37,17 (Wert M)
z
Sowohl Klein- als auch Großbuchstaben Z schließen eine Reihe von SVG-Segmenten ab.
,
Ein Komma beginnt die nächste Folge einfacher Vektorgrafiksegmente. Die nächste Reihe einfacher Vektorliniensegmente bildet die äußere Box.
M50,0
Beginne bei x-Achse 50 und y-Achse 0.
H0
Ziehe eine gerade Linie bis (0,0).
v50
Zeichne eine vertikale Linie von 0,0 Pixel relativ zu 50. Diese Linie wird auf (0,50) gezogen.
H50
Zeichnen Sie eine horizontale Linie von 50 Pixeln relativ zu (0,-50). Diese Linie wird rechts zu (50,50) gezogen.
V0
Zeichne eine vertikale Linie, bis du die y-Achsen-Koordinate 0 erreichst. Dies zieht eine Linie bis (50,0), was dem Wert von M entspricht.
z
Sowohl Klein- als auch Großbuchstaben Z schließen eine Reihe von SVG-Segmenten ab.
Fügen Sie den Code an:
Abschließend ist der Link zum Dokument angehängt: https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/d
|
Veröffentlicht am 04.05.2018 11:29:47
|
|
|
|
