Elysia Tools

Durchsuche Tools, Beispiele, visuelle Erklärungen und Themenguides an einem klaren Ort.

Beliebte Kategorien

Themen

Sprache
ZHESPTRUFRDEEN

Elysia Tools

Mobile Navigation

Design

SVG-Pfaddaten-Längenläufer

· Zuletzt aktualisiert：2026-09-04

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.

Einzelheiten

Wobei dieses Tool hilft

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.

Ausführung

Dieses Tool ausführen

Fülle das Formular aus, starte das Tool und prüfe das Ergebnis an einem Ort.

Beispiele

Beispiele zu diesem Tool

Verwandt

Mit verwandten Tools und Themen fortfahren

Verfasst vom Elysia Tools Team

Leitfaden zur Tool-Nutzung

Erfahren Sie, wann dieses Tool passt, was es unterstützt und wie Nutzer es anwenden.

Wichtige Fakten

Kategorie
Design
Eingabetypen
textarea, text, number
Ausgabetyp
html
Sample-Abdeckung
4
API bereit
Ja

Überblick

Der SVG-Pfaddaten-Längenläufer analysiert beliebige d-Attribute von SVG-Pfaden Schritt für Schritt und berechnet präzise Bogenlängen für alle Linien-, Bézier- und Bogen-Befehle (M/L/H/V/C/S/Q/T/A/Z). Er liefert kumulative Distanzen für stroke-dashoffset-Animationen, exakte Bounding-Boxes, Kontrollpunkt-Vektoren und überprüft die Ausrichtung am SVG-viewBox.

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.

So funktioniert es

  1. 1Füge den Inhalt des SVG-d-Attributs in das Textfeld ein und gib optional eine viewBox sowie den gewünschten Zeichenanteil in Prozent an.
  2. 2Der Parser tokenisiert alle Befehle (inklusive kompakter Bogen-Flags und Kurzschreibweisen) und wandelt relative Angaben in absolute Koordinaten um.
  3. 3Die Längen jedes Segments werden analytisch sowie mittels adaptiver Simpson-Quadratur berechnet, ergänzt um Bounding-Boxes und aufgelöste Kontrollgriffe.
  4. 4Das 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.

Alternativen im Vergleich

  • Analysiert SVG-Markup, entfernt redundante Elemente, reduziert die Dateigroesse, vergleicht Vorher/Nachher und exportiert bereinigte Dateien

  • Erkennt haeufige WCAG-2.1-Probleme in HTML, Seiten oder Designbildern und liefert direkt umsetzbare Hinweise

  • Erzeugt Kunst-QR-Codes mit Markenfarben, Verläufen, abgerundeten oder Punkt-Modulen und zentriertem Logo — mit ISO-Masken-Strafaufschlüsselung, Modul-Metadat…

Für wen geeignet

Geeignet für

  • Bilddaten im Browser analysieren.
  • Der Workflow „Cubic S-curve with a reflected S handle“ in einem Durchgang.
  • Wiederholbare Aufgaben mit Bilddaten und denselben Einstellungen.

Weniger geeignet für

  • Vollständig automatisierte Stapelaufträge — diese Seite ist für die interaktive Nutzung gedacht; für Skripte gibt es den API-Endpunkt.
  • Inhalte in anderen Formaten — dieses Tool erwartet Bilddaten.

Grenzfälle und häufige Fehler

  • Sehr große Dateien

    Große Dateien brauchen länger und können an Browser-Speichergrenzen stoßen — versuchen Sie es zuerst mit einer kleineren Probe.

  • Ausgabe nicht geprüft

    Vergleichen Sie die ersten Zeilen oder Seiten der Ausgabe mit der Eingabe, bevor Sie sie produktiv verwenden.

  • Dateien aus ungewöhnlichen Exportprogrammen

    Manche Dateien verwenden Formatvarianten, die sich nicht sauber konvertieren lassen — wenn die Ausgabe falsch aussieht, speichern Sie die Datei in der App, die sie erstellt hat, erneut und versuchen Sie es noch einmal.

Beispiele

1. Analyse einer kubischen S-Kurve

Frontend-Entwickler

Hintergrund

Für eine scrollgesteuerte Web-Animation soll ein geschwungener Pfad mit Bézier-Kurven präzise gezeichnet werden.

Aufgabe

Die Gesamtlänge und der genaue Übergangspunkt zwischen dem C- und dem gespiegelten S-Befehl sind im Code nicht ersichtlich.

Verwendung

Den Pfad 'M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80' eingeben, viewBox auf '0 0 200 200' setzen und analysieren.

pathData: "M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80", viewBox: "0 0 200 200", drawPercent: 50

Ergebnis

Ermittelt eine Gesamtlänge von 282.0104 Einheiten, zeigt die exakte Segmentteilung bei 141.0052 und visualisiert den gespiegelten Kontrollvektor.

2. Überprüfung von elliptischen Bögen und viewBox-Passung

UI-Designer

Hintergrund

Ein Icon mit relativem Kreisbogen soll in eine feste Canvas-Größe von 100x100 Pixeln eingepasst werden.

Aufgabe

Unklarheit darüber, ob der relative Bogenbefehl 'a' die viewBox überschreitet und welche Distanz für die Umrisslinie animiert werden muss.

Verwendung

FAQ

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.

Start
Werkzeuge3201
Beispiele593
Visualisierungen465
Dateibetrachter103
Themen233
Schlagwörter333
Bilder, Audio & Video657

Werkzeuge für Bild-, Audio- und Videobearbeitung, Konvertierung und Optimierung

Mathe, Datum & Finanzen644

Rechner, Zahlenwerkzeuge, Datumslogik, Statistik und Finanztools

Design & Farbe297

Werkzeuge für Farben, Layouts, Grafiken, visuelle Gestaltung und Designhilfen

Text & Schreiben209

Werkzeuge für Schreiben, Bereinigung, Formatierung, Extraktion und Textanalyse

Entwicklung & Web193

Entwicklerwerkzeuge, Netzwerk-Utilities, Web-Debugging und Automatisierungshelfer

Konvertierung & Kodierung175

Werkzeuge für Format-, Datei-, Archiv-, Einheiten- und Kodierungskonvertierung

FLAC/WAV-Quellen prüfen und Nachweise übergeben
Selbst gehostetes Gewinnspiel-Widget prüfen und zur Einbettung übergeben
Stripe-Codepaket prüfen und lokalen Import vorbereiten
Technische Fotoauswahl prüfen und Kandidaten zur Bearbeitung übergeben
UI-Screenshot strukturieren, prüfen und an die Entwicklung übergeben

© 2026 Elysia Tools. Alle Rechte vorbehalten.

DokumentationTarifeÜber unsNutzungsbedingungenDatenschutzerklärungCookiesKontakt
Medien

SVG Beispiele

Beispiele für skalierbare Vektorgrafiken (SVG), die verschiedene SVG-Funktionen und -Techniken demonstrieren

Medien

SVG-Beispiele

Vektorgrafik-Beispiele für den SVG-Viewer im Browser

Datenvisualisierung

D3.js Datenvisualisierung Beispiele

Umfassende D3.js datenvisualisierung beispiele einschließlich diagramme, karten, animationen und interaktive visualisierungen

Datenformate

XML-Beispiele

XML (eXtensible Markup Language)-Formatbeispiele von einfachen bis komplexen Strukturen

Design

Schriftdatei-Inspektor (TTF / OTF / WOFF / WOFF2)

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.

Media

Akkordfolgen-Detektor

Schätzt lokal die Akkorde einer Audiodatei und bündelt CSV, JSON, SVG und Methodennotizen in einer ZIP-Datei.

Media

SVG-Minifier und Analyzer

Analysiert SVG-Markup, entfernt redundante Elemente, reduziert die Dateigroesse, vergleicht Vorher/Nachher und exportiert bereinigte Dateien

Design

Zeichenbrett für Einpunktperspektive

Quader und Hilfslinien zu einem beweglichen Fluchtpunkt zeichnen, schrittweise lernen und lokal als PNG oder SVG speichern.

'M 100,100 h -50 a 50,50 0 1,1 50,-50 z' eingeben und mit viewBox '0 0 100 100' abgleichen.

pathData: "M 100,100 h -50 a 50,50 0 1,1 50,-50 z", viewBox: "0 0 100 100", drawPercent: 75

Ergebnis

Bestätigt die Bogenlänge von 235.6194 bei einer Gesamtlänge von 335.6194 und verifiziert die perfekte Ausrichtung innerhalb der 100x100-viewBox.

SVG-Minifier und Analyzer
Barrierefreiheitspruefer
Kunst-QR-Code-Generator mit gestylten Modulen und Logo-Einbettung