Das `path`-Element in SVG ist das ultimative Zeichenelement. Es kann alles zeichnen! Ich habe gehört, dass unter der Haube alle anderen Zeichenelemente letztendlich sowieso Pfade verwenden. Das Pfadelement nimmt ein einziges Attribut zur Beschreibung dessen, was es zeichnet: das `d`-Attribut. Sein Wert ist eine eigene Mini-Syntax. Es kann ziemlich unentzifferbar aussehen. Es ist eine Menge von Zahlen und Buchstaben, die zu einem langen String zusammengequetscht sind. Wie bei allem im Computer gibt es einen Grund für den Reim. Ich bin hier kein Experte, aber ich dachte, es wäre lustig, einzutauchen.
Hier ist ein Beispiel für einen Pfad mittlerer Komplexität, würde ich sagen
<path d="M213.1,6.7c-32.4-14.4-73.7,0-88.1,30.6C110.6,4.9,67.5-9.5,36.9,6.7C2.8,22.9-13.4,62.4,13.5,110.9
C33.3,145.1,67.5,170.3,125,217c59.3-46.7,93.5-71.9,111.5-106.1C263.4,64.2,247.2,22.9,213.1,6.7z"/>Wir könnten es neu formatieren, um es verständlich zu machen (immer noch gültiger Code)
<path d="
M 213.1,6.7
c -32.4-14.4-73.7,0-88.1,30.6
C 110.6,4.9,67.5-9.5,36.9,6.7
C 2.8,22.9-13.4,62.4,13.5,110.9
C 33.3,145.1,67.5,170.3,125,217
c 59.3-46.7,93.5-71.9,111.5-106.1
C 263.4,64.2,247.2,22.9,213.1,6.7
z" />Die Buchstaben sind Befehle. Die Zahlen sind Werte, die an diese Befehle übergeben werden. Alle Kommas sind optional (es könnten auch Leerzeichen sein).
Zum Beispiel ist der erste Befehl `M`. `M` bedeutet, im übertragenen Sinne, hebe den Stift an und bewege ihn zur exakten Position `213.1, 6.7`. Zeichne noch nichts, bewege nur den Standort des Stifts. So dass, wenn andere Befehle zeichnen, es jetzt an diesem Standort beginnt.
`M` ist nur einer von vielen Pfadbefehlen. Es gibt nach meiner Zählung 18 davon.
Viele (aber nicht alle) davon kommen im Doppelpack. Es gibt eine GROSSBUCHSTABIGE und eine kleingeschriebene Version. Die GROSSBUCHSTABIGE Version ist die absolute Version und die kleingeschriebene ist die relative Version. Nehmen wir M weiter als Beispiel
- `M 100,100` bedeutet „Nimm den Stift und bewege ihn zu den exakten Koordinaten 100,100“
- `m 100,100` bedeutet „Bewege den Stift 100 nach unten und 100 nach rechts von deinem aktuellen Standort aus.“
Viele Befehle haben diese gleiche Konfiguration. Die kleingeschriebene Version berücksichtigt, wo sich der „Stift“ gerade befindet.
Betrachten wir zwei absolute Befehle
Gefolgt von einem relativen Befehl
Genau wie die `M`- und `m`-Befehle nehmen `L` und `l` zwei Zahlen entgegen: entweder absolute oder relative Koordinaten. Es gibt vier weitere Befehle, die im Wesentlichen einfachere Versionen der Linienbefehle sind. Sie zeichnen ebenfalls Linien, benötigen aber nur einen Wert: horizontal oder vertikal. Als wir `l 25,0` verwendeten, hätten wir `h 25` verwenden können, was bedeutet: „Zeichne von der aktuellen Position des Stifts 25 nach rechts.“ Etwas prägnanter, nehme ich an. Sein größeres Geschwisterchen `H` bedeutet, wie wir vermuten können, zum exakten horizontalen Koordinatenwert 25 zu zeichnen. `V` und `v` bewegen sich vertikal absolut und relativ, wie Sie sicherlich erraten werden.
Schauen Sie sich diese Chris Nager-Demo an, in der er ein Kreuz mit extrem wenig Code zeichnet, dank der relativen Koordinatenzeichnung
Sehen Sie das allerletzte Zeichen, das Chris dort verwendet hat? `Z`. `Z` (oder `z`, es spielt keine Rolle) „schließt“ den Pfad. Wie jeder andere Befehl ist er optional. Es ist eine einfache und bequeme Möglichkeit, eine gerade Linie direkt zur letzten Stelle zu zeichnen, an der der „Stift“ abgesetzt wurde (wahrscheinlich der letzte `M`- oder `m`-Befehl). Es erspart Ihnen, diese erste Position wiederholen und einen Linienbefehl verwenden zu müssen, um dorthin zurückzukehren.
Betrachten wir die bisher behandelten Befehle.
| M x,y | Bewege dich zu den absoluten Koordinaten x,y |
| m x,y | Bewege dich x nach rechts und y nach unten (oder links und oben bei negativen Werten) |
| L x,y | Zeichne eine gerade Linie zu den absoluten Koordinaten x,y |
| l x,y | Zeichne eine gerade Linie zu einem Punkt, der relativ x nach rechts und y nach unten ist (oder links und oben bei negativen Werten) |
| H x | Zeichne eine Linie horizontal zur exakten Koordinate x |
| h x | Zeichne eine Linie horizontal relativ um x nach rechts (oder nach links bei negativem Wert) |
| V y | Zeichne eine Linie vertikal zur exakten Koordinate y |
| v y | Zeichne eine Linie vertikal relativ um y nach unten (oder nach oben bei negativem Wert) |
| Z (oder z) | Zeichne eine gerade Linie zurück zum Start des Pfades |
Bisher haben wir uns nur gerade Linien angesehen. `path` ist ein vollkommen akzeptables Element und eine Syntax dafür, obwohl man argumentieren könnte, dass Elemente wie `line` eine noch einfachere Syntax für gerade Linienformen haben, wenn auch etwas eingeschränkter.
Die Superkraft von `path` sind Kurven! Es gibt ziemlich viele verschiedene Arten.
Erinnern Sie sich an den ersten Teil des Beispielcodes, den wir uns angesehen haben? Er verwendete viele `C`- und `c`-Befehle. Das sind „Bézier-Kurven“ und erfordern mehr Daten für ihre Funktion.
Der `C`-Befehl nimmt drei Punkte entgegen. Die ersten beiden Punkte definieren die Position zweier Bézier-Steuerpunkte. Vielleicht ist dieses Konzept von einem Werkzeug wie dem Zeichenstift in Adobe Illustrator vertraut
Der letzte der drei Punkte ist das Ende der Kurve. Der Punkt, an dem die Kurve enden soll. Hier ist eine Illustration
Der kleingeschriebene `c`-Befehl ist genau derselbe, außer dass alle drei Punkte relative Werte verwenden.
Der `S`- (oder `s`-) Befehl ist ein Kumpel der C-Befehle, da er nur *zwei* Punkte benötigt, weil er davon ausgeht, dass der erste Bézier-Punkt eine Spiegelung des letzten Bézier-Punktes des letzten S- oder C-Befehls ist.
Der `Q`-Befehl ist einer der einfacheren, da er nur zwei Punkte benötigt. Der Bézier-Punkt, den er benötigt, ist ein „quadratischer“ Kurvenkontrollpunkt. Es ist, als ob sowohl der Start- als auch der Endpunkt einen einzigen Punkt für ihr Steuerungs-Handle teilen.
Wir können auch gleich `T` behandeln. Er ist ein Kumpel von `Q`, genau wie `S` von `C` ist. Wenn `T` nach einem `Q` kommt, wird angenommen, dass der Kontrollpunkt eine Spiegelung des vorherigen ist, sodass Sie nur den Endpunkt angeben müssen.
Der `A`-Befehl ist wahrscheinlich der komplizierteste. Oder er benötigt zumindest die meisten Daten. Sie geben Informationen, die die Breite, Höhe und Rotation eines Ovals definieren, zusammen mit dem Endpunkt. Dann noch ein paar weitere Informationen darüber, welchen Weg entlang dieses Ovals der Pfad nehmen soll. Von MDN
Es gibt zwei mögliche Ellipsen, um die der Pfad verlaufen kann, und zwei verschiedene mögliche Pfade auf beiden Ellipsen, was vier mögliche Pfade ergibt. Das erste Argument ist das `large-arc-flag`. Es bestimmt einfach, ob der Bogen größer oder kleiner als 180 Grad sein soll; am Ende bestimmt dieses Flag die Richtung, in die der Bogen um einen gegebenen Kreis verläuft. Das zweite Argument ist das `sweep-flag`. Es bestimmt, ob der Bogen mit negativen oder positiven Winkeln beginnen soll, was im Wesentlichen auswählt, welchen der beiden Kreise Sie durchlaufen werden.
Joni Trythalls Grafik, die `A` erklärt, aus ihrem Artikel über SVG-Pfade, ist ziemlich klar
Hier sind schriftliche Erklärungen zu diesen Kurvenbefehlen.
| C cX1,cY1 cX2,cY2 eX,eY | Zeichne eine Bézier-Kurve basierend auf zwei Bézier-Steuerpunkten und ende an den angegebenen Koordinaten |
| c | Gleiches gilt für alle relativen Werte |
| S cX2,cY2 eX,eY | Im Grunde ein C-Befehl, der davon ausgeht, dass der erste Bézier-Steuerpunkt eine Spiegelung des letzten Bézier-Punktes ist, der im vorherigen S- oder C-Befehl verwendet wurde |
| s | Gleiches gilt für alle relativen Werte |
| Q cX,cY eX,eY | Zeichne eine Bézier-Kurve basierend auf einem einzigen Bézier-Steuerpunkt und ende an den angegebenen Koordinaten |
| q | Gleiches gilt für alle relativen Werte |
| T eX,eY | Im Grunde ein Q-Befehl, der davon ausgeht, dass der erste Bézier-Steuerpunkt eine Spiegelung des letzten Bézier-Punktes ist, der im vorherigen Q- oder T-Befehl verwendet wurde |
| t | Gleiches gilt für alle relativen Werte |
| A rX,rY Rotation, arc, sweep, eX,eY | Zeichnet einen Bogen, der auf der Kurve einer Ellipse basiert. Definieren Sie zuerst die Breite und Höhe der Ellipse. Dann die Rotation der Ellipse. Zusammen mit dem Endpunkt ergeben sich zwei mögliche Ellipsen. Die Parameter `arc` und `sweep` sind entweder 0 oder 1 und bestimmen, welche Ellipse und welchen Pfad sie nehmen wird. |
| a | Gleiches gilt für relative Werte für eX,eY |
Möchten Sie viele Beispiele sehen? OK
Wenn Sie in einem kürzlich veröffentlichten Blink-basierten Browser nachschauen und eine Maus haben, sehen Sie einige Hover-Animationen! Es stellt sich heraus, dass man Pfaddaten jetzt direkt in CSS einstellen kann. Zum Beispiel...
<svg viewBox="0 0 10 10">
<path d="M2,5 C2,8 8,8 8,5" />
</svg>svg:hover path {
transition: d 0.2s;
d: path("M2,5 C2,2 8,2 8,5");
}Dieser SVG Path Visualizer ist wirklich cool!
Möchten Sie mehr über SVG erfahren? Es ist wirklich cool, verspreche ich. Ich habe ein ganzes Buch darüber geschrieben. Es heißt Practical SVG und ist nicht sehr teuer.
Es ist verrückt, dass der Browser die d-Eigenschaft animiert!
Aber das lässt auch viele offene Stellen für herstellerspezifische Implementierungen.
Ich hoffe, es wird kein Blutbad.
Vorerst kann ich sehen, dass Blink einen Pfad nur animieren kann, wenn die Anzahl der Eckpunkte übereinstimmt und wenn die Segmente mit denselben Befehlen oder ihren Case-Gegenstücken generiert werden (z. B. „L“ mit „l“, aber nicht mit „V“ oder „H“).
Ich habe eine ähnliche Pfadfunktion für Canvas geschrieben, die die eher ausführliche Pfadsyntax auf etwas viel Handlicheres reduziert
http://www.rgraph.net/blog/svg-style-paths-for-canvas-with-the-rgraph-path-function.html
Ist das ein Tippfehler? Sollte es heißen „...zur ersten Stelle...“? (Das würde ich von einem „Pfad schließen“-Befehl erwarten.)
Schon gut – ich dachte, „die letzte Stelle, an der der Stift abgesetzt wurde“ beziehe sich auf den unmittelbar vorherigen Befehl, nicht auf den ersten.
Ja, es ist ein wenig verwirrend. „Die letzte Stelle, an der der Stift abgesetzt wurde“ bezieht sich auf den letzten `M`/`m`-Befehl. Das ist wichtig, weil man mehrere getrennte Unterpfade durch mehrere `M`/`m`-Befehle erstellen kann, und `closepath` schließt den letzten Unterpfad ab, es geht nicht zurück zum allerersten Anfang.
hat gerade mein Gehirn gesprengt....
Ich bin mir nicht sicher, woher Sie diese Information haben, aber es gibt einen relativen Bogenerbefehl mit kleingeschriebenem `a`. Der Endpunkt des Bogens ist relativ zum vorherigen Endpunkt. Die Radius- und Flag-Parameter ändern sich nicht.
http://codepen.io/AmeliaBR/pen/42635482644f7e132aedece04ef8f3ac?editors=1100
Auch, Credit, wo es hingehört: Die Ellipsengrafik ist eine Kopie einer Grafik aus den ursprünglichen SVG-Spezifikationen. Jonis Referenz ist für viele andere Dinge großartig, aber diese hat sie nicht erstellt.
Schließlich beachten Sie, dass die Syntax für die CSS-Eigenschaft `d`, die derzeit in Chrome implementiert ist, nicht die endgültige Version der Spezifikation ist. Wenn das Feature in allen Browsern stabil ist, sollte es nur einen String erfordern, keine `path()`-Funktionsnotation. Die Funktion impliziert eine generische Form, was bedeuten sollte, dass andere CSS-Formfunktionen stattdessen verwendet werden könnten, aber die Browser waren noch nicht bereit dafür.
Ich habe einen Bug bei Chrome eingereicht, um ihre Implementierung zu aktualisieren, was hoffentlich schnell geschehen wird, damit Webautoren sich keine Sorgen über mehrere Syntaxes machen müssen. Wenn Sie sofort damit experimentieren möchten, fügen Sie vielleicht beide Versionen hinzu. Wir möchten nicht, dass Chrome die Unterstützung für die Entwurfsversion auf Dauer aufrechterhalten muss!
Ansonsten: eine tolle, leicht verständliche Erklärung! (Genau wie das Buch!)
Ich habe das mit A/a behoben. Ich weiß nicht, woher ich die Information „keine kleingeschriebene Version“ hatte.
Die Syntax-Sachen sind sehr, sehr interessant. Aus dem Stegreif fallen mir einige Eigenschaften ein, bei denen „CSS-Formen“ verwendet werden
Motion-path (das in `offset-path` umbenannt wird) verwendet bereits `path()`, so:
Es ist sinnvoller, die `path()`-Sache zu überspringen, wenn man sich Eigenschaften ansieht, die eindeutig bereits eine bestimmte Syntax verwenden
Klarstellung zu `d` als CSS-Eigenschaft (da ich es nie ausgeführt habe)
Die endgültige Spezifikation sieht vor, dass die Eigenschaft direkt dem Attribut entspricht, außer dass der Wert ein quotierter String sein wird
Wenn Sie mit der aktuellen Chrome-Implementierung experimentieren möchten, probieren Sie etwas Ähnliches aus (idealerweise mit einem Preprocessor-Mixin, um den Überblick zu behalten)
Bezüglich all der anderen Eigenschaften, die CSS-Formfunktionen verwenden (clip-path, shape-outside, motion/offset-path)
In diesen Fällen beschreibt die Funktion eine vollständige Form, und jede Form kann verwendet werden: Kreis, Ellipse, Polygon. Die Syntax `path(string)` wird dort weiterhin verwendet und sollte in all diesen Eigenschaften verfügbar sein. Die Idee ist, dass diese Eigenschaften einen `<shape-function>`-Datentyp verwenden. Die `path()`-Funktion definiert nur eine neue Shape-Funktion. Wenn in Zukunft eine Spezifikation eine `octagon()`-Shape-Funktion definiert, wäre sie auch in allen Eigenschaften verfügbar, die Formen verwenden.
Aber `d` wird ähnlich behandelt wie die einzelnen Eigenschaften für die anderen SVG-Formen (`x`, `y`, `cx`, `cy`, `r`, etc.). Sie definieren einen Teil des Parameters dafür, *wie* die Form gezeichnet wird, aber sie definieren die Form nicht vollständig. Die vollständige Form (ob Sie einen Kreis, eine Ellipse, ein Rechteck oder einen Pfad erhalten) wird immer noch durch den SVG-Elementtyp bestimmt.
Es ist nicht ideal. Wir sind auf halbem Weg, SVG-Formen zu „CSS-ifizieren“, aber nicht ganz. Irgendwann möchte ich ein unabhängiges logisches CSS-Modell für SVG-Geometrie erstellen (GitHub-Diskussion hier). Aber so weit sind wir noch nicht.
Oh, und PS
`points` für Polygone ist noch nicht CSS-ifiziert. Ein weiterer unvollständiger Punkt. Ich konnte mich nicht entscheiden, ob ich der SVG-Syntax folgen sollte (keine Einheiten und locker bei Kommas und Leerzeichen) oder der CSS-Syntax, die in der `polygon()`-Funktion verwendet wird. Also, anstatt eine schlechte Entscheidung zu treffen, mit der wir stecken bleiben würden, wurde es einfach gar nicht spezifiziert, zumindest noch nicht.
PS
Es gibt noch ein paar andere coole Pfad-Features, die in SVG 2 kommen, obwohl keiner der Browser dafür bereits Implementierungen hat.
Der „Bearing“-Befehl (B oder b) ermöglicht es Ihnen, den Basiswinkel zu drehen, der für alle relativen Befehle verwendet wird. Ein relativer `h`-Befehl bedeutet, sich entlang des aktuellen Winkelverlaufs vorwärts (rückwärts bei negativem Wert) zu bewegen, während ein relativer `v`-Befehl bedeutet, sich senkrecht zu diesem Winkel zu bewegen. Großbuchstabe `B` setzt den Winkel auf einen exakten Winkel, Kleinschreibung `b` passt den Winkel relativ zum Tangentenwinkel des vorherigen Pfadsegments an. Der SVG-Pfad wird also mehr zu klassischen „Turtle“-Zeichenbefehlen.
Der Z/z-Befehl wird ebenfalls leistungsfähiger. Er kann automatisch Kurvenbefehle abschließen, sodass Sie immer sicherstellen können, dass die Kurve exakt mit dem Startpunkt verbunden ist, ohne die exakte Koordinate dieses Startpunktes im Auge behalten zu müssen und ohne ein geradliniges Endsegment mit null Länge einzufügen (was Probleme bei der Verwendung von Linienmarkierungen verursacht).
Erstaunliche Ressource… Danke! :). Ich habe mein Logo in ein SVG umgewandelt und es ist großartig. Ich kann es auf jedem Gerät in jeder Größe verwenden!
Wirklich großartiger Artikel Chris, danke, dass du einen der Teile von SVG erklärt hast, von dem ich nie etwas verstanden habe und den ich immer gemieden habe. Ich glaube, das schreit nach einer Codepen-Animation, die zufällige SVGs generiert :D
Ich habe dieses CodePen mit zufällig generierten SVG-Pfaden erstellt und sie ineinander übergehen lassen, nur um zu sehen, wie das aussieht
http://codepen.io/JeffSturgis/pen/GjPpoR