Relative SVG-Pfadbefehle: Den aktuellen Punkt verfolgen

Absolute SVG-Pfadbefehle wie M, L und C verwenden Positionen im aktuellen Benutzerkoordinatensystem. Ihre relativen Formen m, l und c verwenden Versätze gegenüber dem aktuellen Punkt. Wenn du einen Pfad liest oder umschreibst, verfolge diesen Punkt nach jedem Segment. Änderst du einen Befehlsbuchstaben, ohne seine Zahlen anzupassen, kann sich die Form verändern.

Zwei Regeln sorgen besonders häufig für Verwirrung: Das erste Paar eines anfänglichen m wirkt als absolute Bewegung, während weitere Paare relative Linien sind. Außerdem schließt Z oder z einen Teilpfad und setzt den aktuellen Punkt auf dessen Anfang zurück. Eine neue relative Bewegung nach diesem Schließen verwendet den zurückgesetzten Punkt.

Positionen und Versätze getrennt lesen

Die W3C-Pfadspezifikation definiert einen Pfad über seinen aktuellen Punkt, Teilpfade und Zeichenbefehle. Die Koordinaten sind SVG-Benutzereinheiten, nicht unbedingt Bildschirmpixel. Ein viewBox oder eine Transformation kann sie auf eine andere angezeigte Position abbilden.

Ausgehend von (40, 40) beschreiben diese beiden Befehle dieselbe Linie:

L180 40
l140 0

Der erste legt den Endpunkt (180, 40) fest. Der zweite addiert (140, 0) zu (40, 40). Beide enden bei (180, 40), der zum aktuellen Punkt für das nächste Segment wird.

Dagegen addiert l180 40 den Versatz (180, 40) und endet bei (220, 80). Der Befehl ist syntaktisch gültig, zeichnet aber eine andere Linie.

Groß- und kleingeschriebenes Z haben dieselbe Wirkung: Sie nehmen keine Koordinatenargumente entgegen. Die MDN-Referenz zu d führt die Befehle und ihre jeweiligen Parameter auf.

Zwei Beschreibungen derselben eigenen Grafik vergleichen

Speichere dieses vollständige SVG als absolute.svg und öffne es in einem Browser. Es enthält ein zusammengesetztes petrolfarbenes Abzeichen mit einer quadratischen Aussparung und eine separate korallfarbene kubische Kurve:

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="240" viewBox="0 0 300 240">
  <path class="badge" fill="#173b40" fill-rule="evenodd" d="M40 40L180 40L210 80L180 140L40 140Z M80 70L80 110L120 110L120 70Z"/>
  <path class="curve" fill="none" stroke="#f28567" stroke-width="6" d="M40 190C80 145 155 225 220 180"/>
</svg>

Behalte für relative.svg SVG-Größe, viewBox und Stile bei, ersetze aber die beiden Pfadelemente durch diese:

<path class="badge" fill="#173b40" fill-rule="evenodd"
  d="m40 40 140 0 30 40 -30 60 -140 0z m40 30 0 40 40 0 0 -40z"/>
<path class="curve" fill="none" stroke="#f28567" stroke-width="6"
  d="m40 190c40 -45 115 35 180 -10"/>

Wir haben beide Originaldateien in einem Browser dargestellt, zusammen mit einer absichtlich fehlerhaften Kopie des absoluten Abzeichens. Die fehlerhafte Kopie ändert lediglich ihr erstes L180 40 in l180 40; die Zahlen bleiben unverändert.

Unsere Seite verwendete die nativen SVG-Methoden getTotalLength() und getPointAtLength(), um 301 Stichproben pro Pfad an entsprechenden Anteilen der Gesamtlänge zu vergleichen. Die angezeigten Längen betrugen für jedes Abzeichen 657.082 Benutzereinheiten und für jede Kurve 189.066. Die größte ermittelte Punktabweichung wurde für beide Paare als 0.000000 angezeigt.

Diese Messung bestätigt die Übereinstimmung dieser konkreten Zeichenfolgen, deren Linieneckpunkte und kubische Punkte auch nach der folgenden Rechnung übereinstimmen. Sie beweist nicht, dass eine beliebige Umschreibung oder ein Konverter jeden SVG-Befehl korrekt verarbeitet. Der Vergleich verwendet durchgehend denselben nicht transformierten Darstellungsbereich und dieselben Füllungs- und Kontureinstellungen.

Das erste m und seine impliziten Linien verfolgen

Unser Abzeichen beginnt mit:

m40 40 140 0 30 40 -30 60 -140 0z

Nur das erste Paar führt eine Bewegung aus. Die übrigen Paare verhalten sich wie implizite relative l-Segmente. Die moveto-Definition legt ausdrücklich fest, dass diese späteren Paare relativ bleiben, obwohl das anfängliche m40 40 als absoluter Start behandelt wird.

Verfolge jeweils ein Paar:

Zum Vergleich: Ein großgeschriebenes M mit mehreren Paaren würde seine späteren Paare in implizite absolute L-Segmente umwandeln. Es würde weder jedes Paar als weitere Bewegung behandeln noch dieselben Differenzen wie dieses kleingeschriebene Beispiel verwenden.

Ein Pfadelement legt seine eigene Pfadsequenz fest. Beginne sein anfängliches relatives m nicht am Endpunkt eines unabhängigen vorhergehenden Pfadelements.

Den Anfang des geschlossenen Teilpfads für die nächste Bewegung verwenden

Die Aussparung beginnt nach dem ersten z:

m40 30 0 40 40 0 0 -40z

In diesem Moment liegt der aktuelle Punkt bei (40, 40). Die neue relative Bewegung addiert daher (40, 30) und beginnt die Aussparung bei (80, 70). Ihre impliziten Linien erreichen anschließend (80, 110), (120, 110) und (120, 70), bevor der Pfad geschlossen wird.

Wenn du irrtümlich den letzten Linienendpunkt (40, 140) des äußeren Abzeichens als Ausgangspunkt verwendest, würdest du diese Bewegung bei (80, 170) platzieren. Das vorherige Schließen macht diese Berechnung falsch. Die closepath-Definition setzt den aktuellen Punkt auf den Anfangspunkt des aktuellen Teilpfads zurück.

Beide Teilpfade gehören zu einem Pfadelement. Dessen fill-rule="evenodd" macht das innere Quadrat in diesem Testbeispiel zu einer Aussparung. Halte Füllregel und Füllungs- und Kontureinstellungen beim Vergleich umgeschriebener Koordinaten konstant, damit eine veränderte Füllung die geprüfte Geometrie nicht verdeckt.

Jeden kubischen Kontrollpunkt vom selben Startpunkt aus messen

Die separate Kurve beginnt bei (40, 190):

M40 190 C80 145 155 225 220 180
m40 190 c40 -45 115 35 180 -10

Bei diesem einzelnen kleingeschriebenen c-Segment sind alle drei Paare Versätze gegenüber (40, 190). Der zweite Kontrollpunkt wird nicht vom ersten Kontrollpunkt aus gemessen, und der Endpunkt nicht vom zweiten.

Setze den aktuellen Punkt nach dem Segment auf dessen Endpunkt (220, 180). Ein nachfolgendes relatives Segment würde diesen neuen Start verwenden. Das MDN-Tutorial zu Pfaden erklärt die kubischen Kontrollpunkte sowie die absoluten und relativen Formen. Der Leitfaden zu Bézier-Übergängen behandelt getrennt davon Tangentengriffe und den Kurzschreibbefehl S.

Übertrage die Koordinatensubtraktion nicht pauschal auf jede Zahl in jedem Befehl. Bei einem Bogen haben Radien, Drehwinkel und Flags andere Aufgaben; nur das Endpunktpaar wechselt zwischen absoluter und relativer Position. Lies die Erklärung der Bogen-Flags, bevor du Daten für A oder a umschreibst. Dieses Beispiel zeigt Linien, Bewegungen, das Schließen und ein gewöhnliches kubisches Segment, keine allgemeine Routine zur Pfadkonvertierung.

Grafik verschieben, ohne Platzierung und Pfadsyntax zu verwechseln

Bei diesem vollständig relativen zusammengesetzten Abzeichen verschiebt eine Änderung des anfänglichen m40 40 in m60 60 seine Eckpunkte um (20, 20): Die späteren Differenzen und die relative Teilpfadbewegung folgen diesem geänderten Start. Der separate Kurvenpfad bleibt unberührt. Bei gemischten Daten bleiben spätere absolute Positionen außerdem an ihren angegebenen Koordinaten verankert, sodass das Bearbeiten der ersten Bewegung den Pfad verformen kann.

Wenn du die gesamte Grafik aus zwei Pfaden als Einheit verschieben willst, behalte beide d-Zeichenfolgen bei und platziere ihre Elemente in einer Gruppe mit transform="translate(20 20)". Die SVG-Spezifikation der Koordinatensysteme erklärt, wie Transformationen Koordinatenabbildungen festlegen. Eine Gruppentransformation verändert die Platzierung, ohne die ursprünglichen Pfaddaten umzuschreiben.

Prüfe, ob der Darstellungsbereich die verschobene Grafik weiterhin vollständig enthält; das Verschieben einer Gruppe vergrößert ihre Zeichenfläche nicht automatisch. Der Leitfaden zur Reihenfolge von SVG-Transformationen behandelt die Platzierung, wenn Verschiebung und Skalierung kombiniert werden.

Ausgangsgeometrie prüfen, bevor du ihre Schreibweise änderst

PerfectVector kann helfen, wenn die Grafik nur als PNG oder JPG vorliegt. Erstelle einen SVG-Kandidaten und vergleiche anschließend seine rekonstruierte Silhouette, Aussparungen und Kurvenform mit der Vorlage, bevor du seine Pfaddaten bearbeitest. Absolute oder relative Schreibweise sagt nichts darüber aus, ob die rekonstruierte Geometrie geeignet ist.

Verwende eine vorhandene Vektorvorlage direkt oder zeichne ein einfaches Symbol neu, wenn du das leichter kontrollieren kannst. Durch das Umschreiben von Befehlen lässt sich die beabsichtigte Form nicht aus fehlenden Rasterinformationen wiederherstellen. Der Überblick zur Bildvektorisierung erklärt diesen separaten Rekonstruktionsschritt.

Wenn du ein brauchbares SVG bearbeitest, behalte eine Kopie des Originals, ändere jeweils ein unterstütztes Segment und vergleiche die tatsächliche Datei bei gleichem Maßstab. Verfolge den Anfang des Teilpfads ebenso wie den aktuellen Punkt. Behalte während des Vergleichs die Füllungs- und Kontureinstellungen bei und teste danach die exportierte Datei in ihrer Zielanwendung.

FAQ

Ist das erste kleingeschriebene m relativ zu einem anderen Pfad? Nein. Wenn m der erste Befehl eines Pfads ist, wird sein erstes Paar als absoluter Start behandelt. Weitere Paare sind implizite relative Linien, und der Endpunkt eines anderen Pfadelements bildet nicht seinen Ausgangspunkt.

Wo liegt der aktuelle Punkt nach Z oder z? Am Anfang des gerade geschlossenen Teilpfads. Eine nachfolgende relative Bewegung verwendet diesen zurückgesetzten Punkt, nicht den Endpunkt der vorhergehenden Linie.

Kann ich einen Pfad konvertieren, indem ich seine Befehle kleinschreibe? Nein. Positionswerte müssen entsprechend der Bedeutung jedes Befehls neu berechnet werden. Ausgehend vom aktuellen Punkt (40, 40) wird L180 40 in diesem Beispiel zu l140 0, während l180 40 eine andere Linie zeichnet.

Quellen

1. W3C — SVG-2-Pfade — Definiert aktuelle Punkte, anfängliches moveto, implizite Linien, das Schließen und kubische Parameter.
2. MDN — Pfad-Tutorial — Veranschaulicht absolute und relative Linien- und Kurvenbefehle.
3. MDN — d-Attribut — Führt die Aufgaben der Befehlsparameter auf, einschließlich Bögen und closepath.
4. W3C — SVG-2-Koordinatensysteme — Erklärt die Abbildung von Benutzerkoordinaten und die Platzierung von Grafiken durch Transformationen.

Du startest mit einer Grafik, die nur als Rasterbild vorliegt? Erstelle SVG-Pfade mit PerfectVector, prüfe die rekonstruierte Silhouette und Aussparungen und bearbeite dann nur die Befehle, die du verstehst. Vergleiche das gelieferte SVG mit dem Original.