# SVG-Pfaddaten-Längenläufer

Gehe einen SVG-Pfad Befehl für Befehl durch (M/L/H/V/C/S/Q/T/A/Z) — Bogenlängen pro Segment, kumulative stroke-dashoffset-Distanzen, Bounding-Boxes pro Unterteilpfad, kubische Handle-Vektoren, Arc-Flag-Lösung und Pfad-vs-viewBox-Ausrichtung.

> Kanonische Seite: https://elysiatools.com/de/tools/svg-path-data-cubic-quadratic-and-arc-command-length-walker

- **Kategorie:** Design

- **Schlagwörter:** svg pfad länge, path d rechner, stroke-dasharray versatz, bezier bogenlänge, svg arc flags, pfad bbox, dashoffset animation, kubische bezier griffe, svg pfad analyseur

## Überblick

Füge ein beliebiges d-Attribut eines SVG- ein und der Läufer tokenisiert den kompletten Befehlsstrom — M m L l H h V v C c S s Q q T t A a Z z, implizite Wiederholungen, kompakte Arc-Flags wie „0 1150 30“ — und rekonstruiert jedes Segment in absoluten Koordinaten. Jedes Segment erhält eine präzise Bogenlänge: exakte Formeln für Geraden, adaptive Simpson-Quadratur (relative Toleranz 1e-9) für die Geschwindigkeitsintegrale kubischer/quadratischer Bézier-Kurven und elliptischer Bögen, analytische Extremwerte (Ableitungswurzeln) für enge Bounding-Boxes statt Abtastung. Die Befehlstabelle zeigt Start-/Enddistanz entlang des Pfades, sodass jede stroke-dasharray/stroke-dashoffset-Animation eine exakte Befehlsgrenze anzielen kann — mit fertigen Snippets in Roh-Benutzereinheiten und normalisiert mit pathLength="1". S- und T-Befehle lösen ihre reflektierten Griffe, sodass du das echte Vektorfeld des Renderers siehst; A-Befehle werden über die Endpunkt→Zentrum-Parametrisierung von SVG 2 gelöst, mit Zentrum, θ1, Δθ und Anwendung der Radien-Skalierungsregel, wenn die Sehne 2·rx/2·ry übersteigt. Ein optionaler viewBox erhält ein Ausrichtungs-Audit: Überlauf, Ränder, Zentrierungsversatz und ein vorgeschlagener enger viewBox.

## Eingaben

- **Pfaddaten (d-Attribut)** (textarea): M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80
- **ViewBox (optional)** (text): 0 0 200 200
- **Zeichenanteil (%)** (number)

## Wann verwenden

- Wenn für CSS- oder Web-Animationen exakte Pfadlängen und Versatzwerte für stroke-dasharray und stroke-dashoffset benötigt werden.
- Wenn komplexe SVG-Pfade mit relativen Koordinaten, impliziten Wiederholungen oder elliptischen Bögen debuggt und in absolute Segmente zerlegt werden sollen.
- Wenn ein SVG-Pfad auf visuellen Überlauf oder Fehlausrichtung innerhalb einer definierten viewBox geprüft und optimiert werden muss.

## Funktionsweise

- Füge den Inhalt des SVG-d-Attributs in das Textfeld ein und gib optional eine viewBox sowie den gewünschten Zeichenanteil in Prozent an.
- Der Parser tokenisiert alle Befehle (inklusive kompakter Bogen-Flags und Kurzschreibweisen) und wandelt relative Angaben in absolute Koordinaten um.
- Die Längen jedes Segments werden analytisch sowie mittels adaptiver Simpson-Quadratur berechnet, ergänzt um Bounding-Boxes und aufgelöste Kontrollgriffe.
- Das Werkzeug visualisiert den Pfad interaktiv, zeigt kumulative Distanzen pro Befehl und liefert fertige Snippets für Animationen in Benutzereinheiten und normalisierter Form.

## Anwendungsfälle

- Exaktes Timing und Keyframe-Erstellung für 'Line-Drawing'-Animationen auf Webseiten via CSS oder SVG-Animation.
- Geometrische Inspektion von Pfaden aus Vektorgrafikprogrammen zur Behebung fehlerhafter Bogenradien (A-Befehle) oder verschobener Griffe.
- Berechnung minimaler Bounding-Boxes zur Optimierung von SVG-Icons und Entfernung überflüssiger Ränder.

## Häufig gestellte Fragen

### Wie werden die Bogenlängen von Bézier-Kurven und elliptischen Bögen berechnet?

Geradlinige Segmente nutzen direkte Distanzformeln, während kubische und quadratische Bézier-Kurven sowie elliptische Bögen über adaptive Simpson-Quadratur mit hoher numerischer Präzision integriert werden.

### Unterstützt das Tool relative SVG-Befehle und kompakte Flags?

Ja, sämtliche SVG-Befehle (Groß- und Kleinschreibung wie m, l, c, s, q, t, a, z) sowie zusammenhängende Zahlenfolgen und kompakte Bogen-Flags wie '0 1150 30' werden vollständig unterstützt.

### Wie hilft das Tool bei stroke-dashoffset-Animationen?

Die Tabelle listet kumulative Start- und Enddistanzen jedes Segments auf, sodass Keyframes exakt an Segmentgrenzen ausgerichtet werden können – sowohl in Benutzereinheiten als auch mit pathLength='1'.

### Was passiert bei S- und T-Kurzbefehlen?

S- und T-Befehle spiegeln den vorherigen Kontrollpunkt automatisch nach SVG-Spezifikation und zeigen die resultierenden Handle-Vektoren im absoluten Koordinatenraum an.

### Welche Prüfung führt das Tool bei der viewBox durch?

Es berechnet die analytische Bounding-Box des Pfades, prüft auf Überläufe oder Ränder im Verhältnis zur eingegebenen viewBox und schlägt bei Bedarf eine passgenaue Box vor.

## Ähnliche Tools

- [Schriftdatei-Inspektor (TTF / OTF / WOFF / WOFF2)](https://elysiatools.com/de/tools/font-file-inspector): Lade eine TTF-, OTF-, WOFF- oder WOFF2-Datei hoch (WOFF2 wird automatisch dekomprimiert) und prüfe alle Metadaten: Familie/Subfamilie/Designer/Copyright/Version, Glyphenanzahl, unitsPerEm, Strichstärke und Breite, Kursivwinkel, Stilflags und Bounding-Box; Heatmap der Unicode-Blockabdeckung; SVG-Glyphenvorschau (eigener Text, Auto-Stichprobe für Icon-Fonts); liga-Ligaturen und OpenType-Features; fvar-Achsen und benannte Instanzen variabler Fonts.
- [Akkordfolgen-Detektor](https://elysiatools.com/de/tools/audio-chord-progression-detector): Schätzt lokal die Akkorde einer Audiodatei und bündelt CSV, JSON, SVG und Methodennotizen in einer ZIP-Datei.
- [SVG-Minifier und Analyzer](https://elysiatools.com/de/tools/svg-minifier-analyzer): Analysiert SVG-Markup, entfernt redundante Elemente, reduziert die Dateigroesse, vergleicht Vorher/Nachher und exportiert bereinigte Dateien
- [CSS-Farbverlaufs-Mesh-Generator (konisch + radial)](https://elysiatools.com/de/tools/css-gradient-mesh-generator): Erzeugt das seit 2024 auf Dribbble/Behance populäre „Gradient-Mesh“: mehrere radiale Verläufe (Farbfleck → Ausblendung in transparent derselben Farbe) über einer Basiskolorit (optional eine konische Schicht), mit Mischmodi, SVG-Filmkorn, geseedeten Layouts (Ecken / Ring / Streuung / Raster), Live-Vorschau, kopierbarem CSS und Tailwind-Willkürklasse. Flecken blenden über 8-stelliges Hex #RRGGBB00 aus — ohne den grauen Ring des transparent-Schlüsselworts.
- [Glassmorphism-/Neumorphism-CSS-Snippet-Generator](https://elysiatools.com/de/tools/glassmorphism-css-snippet-builder): Erzeugt den vollständigen Glassmorphism- oder Neumorphism-CSS-Snippet von Anfang bis Ende: Blur, Sättigung, Tönungsdeckkraft, Radius, Rahmen, Außenschatten und Oberkanten-Highlight; optional SVG-feTurbulence-Korn und @supports-Fallback; automatisch mit -webkit-backdrop-filter-Präfix (vor Safari 18 nötig) und Tailwind-Klassen-Mapping (mit v3/v4-Hinweis), plus Live-Vorschau der Karte auf Gradient-Hintergrund.
- [Kunst-QR-Code-Generator mit gestylten Modulen und Logo-Einbettung](https://elysiatools.com/de/tools/qr-code-art-styled-module-and-logo-embed-generator): Erzeugt Kunst-QR-Codes mit Markenfarben, Verläufen, abgerundeten oder Punkt-Modulen und zentriertem Logo — mit ISO-Masken-Strafaufschlüsselung, Modul-Metadaten und Reed-Solomon-Löschbudget-Urteil.
- [Biomassepyramide und Energiefluss (10%-Regel)](https://elysiatools.com/de/tools/biomass-pyramid): Erzeugt eine Nahrungspyramide nach dem Lindeman-Gesetz: Geben Sie die Energie/Biomasse der Produzenten E₁, die Transfereffizienz (Standard 10%, Bereich 0.1–40%) und die Zahl der Ebenen (3–6) ein. Sie erhalten Energie/Biomasse je Ebene, den Prozentsatz der Produzenten und die Verluste bei jedem Transfer (Atmung, Egestion, Nicht-Prädation). Rendert eine farbige SVG-Pyramide (Breiten im √E-Maßstab zur Sichtbarkeit; die Zahlen sind immer echt) und eine Tabelle je Ebene und erklärt, warum Energiepyramiden immer aufrecht sind, während Zahlen-/Biomassepyramiden invertiert sein können (z. B. marine Ökosysteme). Typische gemessene Effizienzen: 5–20%.
- [Chinesischer Strichfolge-Zerleger](https://elysiatools.com/de/tools/chinese-stroke-order-decomposition): Zerlegt ein chinesisches Zeichen in seine Strichfolge und Radikalstruktur und rendert eine SVG-Strichfolge-Demonstration mit Komponentenfärbung.

## Beispiele

- [SVG Beispiele](https://elysiatools.com/de/samples/svg-samples): Beispiele für skalierbare Vektorgrafiken (SVG), die verschiedene SVG-Funktionen und -Techniken demonstrieren
- [SVG-Beispiele](https://elysiatools.com/de/samples/svg-viewer-samples): Vektorgrafik-Beispiele für den SVG-Viewer im Browser
- [D3.js Datenvisualisierung Beispiele](https://elysiatools.com/de/samples/d3js-data-visualization): Umfassende D3.js datenvisualisierung beispiele einschließlich diagramme, karten, animationen und interaktive visualisierungen
- [XML-Beispiele](https://elysiatools.com/de/samples/xml-samples): XML (eXtensible Markup Language)-Formatbeispiele von einfachen bis komplexen Strukturen