> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions.
# SVG-Pfadlänge messen, ohne den Maßstab zu verwechseln
> Miss SVG-Pfade in Browser-Benutzereinheiten, berücksichtige Transformationen und Sollgröße und unterscheide Kontursummen von pathLength-Kalibrierung und Maschinenwegen.
Source: https://perfectvector.com/de/blog/measure-svg-path-length
Language: de
Author: Irene Kim
Published: 2026-10-16T08:00:00+09:00
Rufe zum Messen eines SVG-Pfads `getTotalLength()` am Geometrieelement auf und bestimme dann das Koordinatensystem hinter der Zahl. Der Browser liefert eine Länge in Benutzereinheiten. Diese Zahl ist nicht automatisch die dargestellte Länge, ein Millimetermaß oder die Verfahrstrecke einer Maschine.
Unsere eigene Diagonale ist beispielsweise 50 Benutzereinheiten lang. Gleichmäßiges Skalieren verdoppelt ihre Länge im Wurzelkoordinatenraum auf 100, während ausschließlich horizontales Skalieren ungefähr 72,111 ergibt. Das lokale API-Ergebnis bleibt in beiden Fällen 50. Diese Zahlen beantworten unterschiedliche Messfragen.
## Miss vor dem Motiv ein bekanntes Segment
Du brauchst eine SVG mit zugänglicher Geometrie und einen Browser, der Inline-SVG und JavaScript ausführt. Arbeite an einer Motivkopie. Entscheide vor dem Notieren eines Ergebnisses, ob du lokale Geometrie, transformierte Geometrie oder eine Länge bei festgelegter physischer Größe brauchst.
Ein Pfad speichert einen Verlauf mit Befehlen wie Verschieben, Linie, Kurve und Schließen. Eine Benutzereinheit gehört zu diesem SVG-Koordinatensystem; nenne sie nicht Pixel oder Millimeter, ohne die Zuordnung zu prüfen. [MDNs Referenz zu `getTotalLength()`](https://developer.mozilla.org/en-US/docs/Web/API/SVGGeometryElement/getTotalLength) definiert das Ergebnis als vom Browser berechnete Pfadlänge in Benutzereinheiten.
Dieses vollständige HTML-Beispiel misst eine gerade Strecke. Speichere es als HTML-Datei und öffne sie im Browser:
```html
SVG length control
```
Die horizontale Änderung beträgt 30 und die vertikale 40, also ist die erwartete Länge `sqrt(30² + 40²) = 50`. Das angezeigte Ergebnis liefert eine bekannte Kontrolle, bevor du einer komplexen Kurve oder einem importierten Emblem vertraust. Der 240-Pixel-Viewport macht aus diesem lokalen Ergebnis keine 100 Benutzereinheiten.
In unserem Browsertest legten wir eine Toleranz von 0,01 Benutzereinheiten fest. Eine Viertelkreiskontrolle mit Radius 10 hat die analytische Länge `5π`, ungefähr 15,708. Der Testbrowser meldete Chrome 155 und lieferte ungefähr 15,7102, innerhalb dieser Toleranz. Browser berechnen Kurvenlängen numerisch. Behalte deshalb sinnvolle Genauigkeit bei und vergleiche mit einer passenden Toleranz, statt von jeder Implementierung identische letzte Dezimalstellen zu verlangen.
## Halte lokale und transformierte Längen auseinander
Unsere nächsten beiden Beispiele behalten dasselbe `d="M10 10 L40 50"` und ergänzen Transformationen:
| Ursprüngliches Segment | Lokale API-Länge | Länge nach der angegebenen Transformation in Benutzereinheiten der Wurzel-SVG |
| ---------------------- | ---------------- | ----------------------------------------------------------------------------- |
| Keine Transformation | 50 | 50 |
| `scale(2)` | 50 | 100 |
| `scale(2 1)` | 50 | Ungefähr 72,111 |
Gleichmäßiges Skalieren multipliziert jede Richtung mit demselben Betrag, deshalb funktioniert in der zweiten Zeile die Multiplikation der lokalen Länge mit 2. Ungleichmäßiges Skalieren behandelt Richtungen unterschiedlich. In der dritten Zeile verläuft die veränderte Strecke 60 Einheiten quer und 40 nach unten: `sqrt(60² + 40²)`, nicht `50 × 2`.
Die [SVG-Spezifikation zu Koordinatensystemen](https://www.w3.org/TR/SVG2/coords.html#ViewBoxAttribute) erklärt, wie Transformationen und die `viewBox`-Zuordnung Koordinatensysteme aufbauen. Benenne deinen Zielraum. Eine Länge in Benutzereinheiten der Wurzel-SVG unterscheidet sich weiterhin von CSS-Pixeln im Viewport.
Für diese bekannte gerade Strecke bildeten wir ihre Endpunkte auf den Benutzerkoordinatenraum der Wurzel-SVG ab:
```js
const root = route.ownerSVGElement;
const relative = root.getCTM().inverse().multiply(route.getCTM());
const a = new DOMPoint(10, 10).matrixTransform(relative);
const b = new DOMPoint(40, 50).matrixTransform(relative);
const transformedLength = Math.hypot(b.x - a.x, b.y - a.y);
```
Die inverse Wurzelmatrix entfernt die Viewport-Zuordnung der Wurzel; die relative Matrix erhält die Transformation des Pfads in den Wurzel-Benutzerraum. Dieser Ausschnitt setzt eine eingebundene SVG mit invertierbaren Matrizen und die konkrete gerade Strecke oben voraus. Ihre Endpunkte sind aus der Pfadquelle bekannt.
Bei einer Kurve ist die Entfernung zwischen den Endpunkten nur eine Sehne. Um eine allgemein transformierte Kurve zu messen, transformiere die Geometrie ins Zielkoordinatensystem und miss sie dort oder nutze eine kontrollierte numerische Annäherung, die getrennte Konturen erhält. Wende diese Endpunktformel nicht auf einen gekrümmten Verlauf an und multipliziere eine ungleichmäßig transformierte Form nicht mit einem geratenen einzelnen Skalierungsfaktor.
*Eigene Geometrie mit live berechneten Browserergebnissen. Lokale Längen, transformierte Längen im Wurzelraum und berechnete nominelle Millimeter sind getrennt beschriftet. Es wird weder eine Zielanwendung noch ein physischer Produktionstest gezeigt.*
## Rechne erst nach Festlegung der Zuordnung in Millimeter um
Unser eigenes Emblemdokument deklariert `width="50mm"`, `height="50mm"` und `viewBox="0 0 100 100"`. Bei der vorgesehenen gleichmäßigen Zuordnung sind das 0,5 mm pro Benutzereinheit. Die äußere Breite des Emblems umfasst 80 Einheiten, seine nominelle Breite beträgt also 40 mm.
Seine beiden Konturlängen ergeben zusammen 380 Benutzereinheiten. Bei diesem deklarierten Maßstab:
```text
50 mm / 100 user units = 0.5 mm per user unit
380 user units × 0.5 mm per user unit = 190 mm of contours
```
Das ist eine Berechnung aus erstellten Abmessungen. Wir haben weder ein gedrucktes Objekt vermessen noch einen Monitor mit einem Lineal geprüft oder die Importgrößen eines Editors getestet. CSS kann den SVG-Viewport überschreiben, und eine Zielanwendung kann das Motiv skalieren. Bestätige dort die gelieferten Maße, bevor du eine nominelle Berechnung als Produktionsmessung behandelst.
Die gesamte Dokumentbreite ist außerdem etwas anderes als die Motivbreite darin. Setzt du stattdessen nur die äußere Emblembreite auf 50 mm, ergibt ihre Breite von 80 Einheiten einen anderen Faktor: `50 / 80 = 0.625 mm per unit`. Dieselben 380 Einheiten würden dann 237,5 mm Konturen darstellen. Notiere, welche Breite du festgelegt hast; nutze den [Leitfaden zum SVG-Begrenzungsrahmen](https://perfectvector.com/de/blog/svg-bounding-box), wenn du zuerst die Ausdehnung prüfen musst.
## `pathLength` kalibriert Abstände, ohne die Geometrie zu skalieren
Wir erstellten außerdem eine Kopie der ursprünglichen 50-Einheiten-Strecke mit `pathLength="1"`. Ihr `getTotalLength()`-Ergebnis blieb 50. Das Attribut änderte weder die Endpunkte noch machte es die geometrische Länge zu einer Einheit.
Die [SVG-Spezifikation der Geometrie-API](https://w3c.github.io/svgwg/svg2-draft/types.html#__svg__SVGGeometryElement__getTotalLength) schließt `pathLength` ausdrücklich aus dem berechneten Ergebnis aus. [MDNs Referenz zu `pathLength`](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/pathLength) beschreibt seine Kalibrierung abstandsabhängigen Verhaltens entlang des Pfads, einschließlich gestrichelter Konturen. Das hilft bei Effekten mit normierten Abständen; es ersetzt nicht die Messung des zugrunde liegenden Verlaufs.
Folge für das schrittweise Zeichnen einer Linie dem [Leitfaden zur SVG-Konturanimation](https://perfectvector.com/de/blog/svg-stroke-animation). Halte dessen kalibrierte Strichwerte von der geometrischen Länge getrennt, die du für eine Motivprüfung notierst.
## Addiere Konturen, ohne die Summe zum Maschinenweg zu machen
Unser Emblem hat eine Außengrenze und ein rautenförmiges Loch. Der ursprüngliche zusammengesetzte Pfad speichert beide geschlossenen Konturen:
```xml
```
Die äußere Kontur misst 280 Einheiten, die innere 100. Der zusammengesetzte Pfad lieferte 380; das getrennte Messen beider Konturen als eigene Pfadelemente und Addieren ergab ebenfalls 380. Die [SVG-Pfadspezifikation](https://www.w3.org/TR/SVG2/paths.html) unterscheidet neue Unterpfade von Linien- und Schließsegmenten. Das Verschieben zum Loch ergänzt kein gezeichnetes Verbindungssegment zwischen den Konturen.
Diese Summe beschreibt die ausgewählte gespeicherte Geometrie. Eine vektorisierte dicke Linie kann zwei Randverläufe haben; ein doppelter Pfad kann Geometrie erneut addieren; ein Emblem kann kleine Innenkonturen enthalten, die du nicht bearbeiten wolltest. Miss die tatsächlich gemeinten Objekte und Konturen und prüfe sie, bevor du eine Summe interpretierst.
Der Maschinenweg ist ein eigenes Ergebnis. Ein Auftrag kann Bewegungen zwischen Konturen, Reihenfolgeentscheidungen, wiederholte Durchgänge oder zielspezifische Pfadänderungen enthalten. Unsere Browsersumme belegt nichts davon. Sie liefert auch keine Schnittzeit, keinen Materialverbrauch und kein erfolgreiches Maschinenergebnis. Brauchst du aus einer gescannten Zeichnung einen einzelnen Mittelpfad, behandelt der [Leitfaden zu einlinigen SVGs](https://perfectvector.com/de/blog/drawing-to-single-line-svg) diese andere Rekonstruktionsaufgabe.
## Dokumentiere die Messung mit ihren Annahmen
1. Bestimme die ausgewählte Geometrie und prüfe, ob sie mehrere Konturen oder Duplikate enthält.
2. Miss eine bekannte Kontrolle und die ausgewählten Pfade in lokalen Benutzereinheiten.
3. Notiere Transformationen und den für dein Ergebnis benötigten Koordinatenraum.
4. Lege die vorgesehenen Dokument- oder Motivmaße vor der Einheitenumrechnung fest.
5. Beschrifte Kalibrierwerte, Kontursummen und Messungen in Zielanwendungen getrennt.
Liefert die bekannte gerade Kontrolle nicht innerhalb deiner festgelegten Toleranz 50, prüfe das ausgewählte Element und ob seine Quelldaten verändert wurden. Stimmen lokale Ergebnisse, aber nicht die nominelle Größe, untersuche Viewport, Transformationen und Zielmaßstab, bevor du Pfade veränderst. Mehr Dezimalstellen lösen keine falsche Koordinatenzuordnung.
Die Dateigeometrieprüfung ist abgeschlossen, wenn eine andere Person die ausgewählte Kontursumme reproduzieren und Einheiten, Zuordnung, Toleranz sowie enthaltene Objekte verstehen kann. Unser aufbewahrtes Browsertestmotiv bestand diese numerischen Kontrollen. Es wurden weder Editorimport noch Maschinenweg oder physische Größe getestet.
Ist die einzige Quelle eine Bitmap, kann [PerfectVectors Bild-zu-Vektor-Workflow](https://perfectvector.com/de/image-to-vector) zuerst bearbeitbare SVG-Geometrie rekonstruieren. Prüfe die wiederhergestellten Konturen und Löcher und miss dann diese ausgewählte Geometrie mit einem ausdrücklichen Maßstab. Vektorisierung erstellt Pfade aus Pixeln; sie stellt keine verlorene physische Größe wieder her, leitet keine Mittellinie ab und schätzt keinen Maschinenweg. Bewahre ein vorhandenes Vektororiginal auf. Das Emblem in diesem Artikel wurde direkt erstellt und nicht vektorisiert.
## Häufige Fragen
**Liefert `getTotalLength()` Pixel oder Millimeter?**
Es liefert die vom Browser berechnete Länge in SVG-Benutzereinheiten. Lege Koordinaten- und Größenzuordnung fest, bevor du das Ergebnis in Viewportpixeln oder nominellen physischen Einheiten ausdrückst.
**Warum bleibt das lokale API-Ergebnis beim Skalieren des Pfads unverändert?**
Der gespeicherte lokale Verlauf und seine transformierte Darstellung liegen in unterschiedlichen Koordinatenräumen. Unsere Strecke mit gleichen Quelldaten lieferte nach gleichmäßiger und ungleichmäßiger Skalierung lokal jeweils 50. Ihre transformierten Längen waren 100 und ungefähr 72,111 Wurzel-SVG-Einheiten.
**Bedeutet `pathLength="1"`, dass der Pfad eine Einheit lang ist?**
Es liefert einen Kalibrierwert für unterstütztes abstandsabhängiges Verhalten entlang des Pfads. Die berechnete Länge der Geometrie-API ignoriert dieses Attribut; unsere 50-Einheiten-Kontrolle lieferte weiterhin 50.
**Kann ich aus einer Kontursumme die Schnittzeit schätzen?**
Die Summe allein reicht nicht. Sie belegt weder die in der Zielanwendung erzeugten Wege noch Fahrten zwischen Konturen, wiederholte Durchgänge, Geschwindigkeitswechsel oder Materialverhalten. Nutze die Auftragsprüfungen des tatsächlichen Ziels und einen geeigneten Produktionstest.
## Quellen
1. [MDN: SVGGeometryElement.getTotalLength()](https://developer.mozilla.org/en-US/docs/Web/API/SVGGeometryElement/getTotalLength) — Vom Browser berechnete Pfadlänge in Benutzereinheiten.
2. [W3C: SVG-Geometrie-API](https://w3c.github.io/svgwg/svg2-draft/types.html#__svg__SVGGeometryElement__getTotalLength) — Berechnete Länge und ihre Unabhängigkeit von der `pathLength`-Kalibrierung.
3. [W3C: SVG-Koordinatensysteme](https://www.w3.org/TR/SVG2/coords.html#ViewBoxAttribute) — Zuordnungen von Viewport, `viewBox` und Transformationen.
4. [MDN: pathLength](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/pathLength) — Kalibrierung abstandsabhängigen Verhaltens entlang des Pfads.
5. [W3C: SVG-Pfade](https://www.w3.org/TR/SVG2/paths.html) — Unterpfade, gezeichnete Segmente und Schließbefehle.
***
Brauchst du vor dem Messen bearbeitbare Geometrie aus einer Bitmap? [Erstelle einen SVG-Kandidaten](https://perfectvector.com/de/image-to-vector), prüfe die enthaltenen Konturen und lege den vorgesehenen Maßstab fest, bevor du eine Länge notierst.
## Explore
- [Read the HTML article](https://perfectvector.com/de/blog/measure-svg-path-length)
- [Gepunktete SVG-Konturen: Abstände und runde Enden](https://perfectvector.com/de/blog/svg-dotted-outlines.md)
- [Leaflet-SVG-Marker: Spitze mit iconAnchor ausrichten](https://perfectvector.com/de/blog/leaflet-svg-marker-anchor.md)
- [Product facts](https://perfectvector.com/product-facts.md)
- [FAQ](https://perfectvector.com/faq.md)
- [Pricing and credits](https://perfectvector.com/pricing.md)