Elysia Tools

Parcourez outils, exemples, explications visuelles et guides thématiques dans un espace clair.

Catégories populaires

Dossiers

Langue
ZHESPTRUFRDEEN

Elysia Tools

Navigation mobile

Design

Marcheur de longueur des données de tracé SVG

· Dernière mise à jour：2026-09-04

Parcourez un tracé SVG commande par commande (M/L/H/V/C/S/Q/T/A/Z) — longueur d’arc par segment, distances cumulées de stroke-dashoffset, boîtes englobantes par sous-tracé, vecteurs de contrôle cubiques, résolution des flags d’arc et alignement tracé-vs-viewBox.

Détails

Ce que cet outil vous aide à faire

Collez n’importe quel attribut d de SVG et le marcheur tokenise tout le flux de commandes — M m L l H h V v C c S s Q q T t A a Z z, répétitions implicites, flags d’arc compacts comme « 0 1150 30 » — puis reconstruit chaque segment en coordonnées absolues. Chaque segment reçoit une longueur d’arc précise : formules exactes pour les droites, quadrature de Simpson adaptative (tolérance relative 1e-9) pour les intégrales de vitesse des Bézier cubiques/quadratiques et des arcs elliptiques, extrema analytiques (racines de la dérivée) pour des boîtes englobantes serrées plutôt qu’échantillonnées. Le tableau des commandes affiche la distance de début/fin le long du tracé : toute animation stroke-dasharray/stroke-dashoffset peut viser la frontière exacte d’une commande, avec des extraits prêts à copier en unités utilisateur et en forme normalisée pathLength="1". Les commandes S et T résolvent leurs poignées réfléchies, montrant le champ de vecteurs réel du moteur de rendu ; les commandes A sont résolues par la paramétrisation extrémités→centre de SVG 2, avec centre, θ1, Δθ et application de la règle de mise à l’échelle des rayons quand la corde dépasse 2·rx/2·ry. Un viewBox facultatif reçoit un audit d’alignement : débordement, marges, décalage de centrage et viewBox serré suggéré.

Exécution

Exécuter cet outil

Remplissez le formulaire, lancez l’outil et consultez le résultat au même endroit.

Exemples

Exemples adaptés à cet outil

Associé

Continuer avec des outils et dossiers associés

Rédigé par l'équipe Elysia Tools

Guide d'utilisation de l'outil

Découvrez quand utiliser cet outil, ce qu'il prend en charge et comment les utilisateurs l'appliquent.

Points clés

Catégorie
Design
Types d’entrée
textarea, text, number
Type de sortie
html
Exemples associés
4
API disponible
Oui

Aperçu

Le Marcheur de longueur des données de tracé SVG analyse et décompose n'importe quel attribut d de tracé commande par commande (M, L, H, V, C, S, Q, T, A, Z). Il calcule avec précision la longueur d'arc de chaque segment, les distances cumulées pour vos animations stroke-dashoffset, la boîte englobante exacte et l'alignement avec le viewBox.

Quand l’utiliser

  • Lorsque vous devez synchroniser une animation CSS stroke-dashoffset sur un segment précis de votre tracé SVG.
  • Lorsque vous souhaitez inspecter les poignées de contrôle réfléchies (S, T) ou déboguer les flags d'arc elliptique (A).
  • Lorsque vous devez vérifier la boîte englobante réelle d'un tracé pour corriger ou recadrer un viewBox SVG mal ajusté.

Fonctionnement

  1. 1Tokenise la chaîne de caractères de l'attribut d, incluant les commandes relatives, les répétitions implicites et les flags compacts.
  2. 2Convertit chaque segment en coordonnées absolues et résout les poignées tangentielles ainsi que les centres des arcs elliptiques selon SVG 2.
  3. 3Calcule la longueur d'arc exacte de chaque commande par intégration numérique (quadrature de Simpson adaptative) et extrait les boîtes englobantes analytiques.
  4. 4Génère la table détaillée des longueurs cumulées, la visualisation des vecteurs et l'audit d'alignement avec le viewBox renseigné.

Cas d’usage

  • Calcul précis des valeurs stroke-dasharray et stroke-dashoffset pour déclencher des étapes d'animation CSS/SVG à des nœuds clés.
  • Audit et recadrage d'icônes SVG pour supprimer les marges superflues ou corriger les éléments tronqués hors du viewBox.
  • Débogage géométrique de tracés complexes générés par des outils vectoriels, notamment la conversion des arcs et poignées lissées.

Comparer les alternatives

  • Analyse le marquage SVG, supprime les elements redondants, reduit la taille, compare avant/apres et exporte des fichiers nettoyes

  • Detecte les problemes WCAG 2.1 courants dans du HTML, des pages ou des maquettes et fournit des corrections concretes

  • Génère des QR artistiques aux couleurs de marque, dégradés, modules arrondis ou en points avec logo centré, accompagnés du détail des pénalités de masque ISO…

Pour qui

Idéal pour

  • Analyser des données d'image dans le navigateur.
  • Le workflow « Cubic S-curve with a reflected S handle », en une seule passe.
  • Des tâches répétables avec des données d'image, avec les mêmes réglages à chaque fois.

Peu adapté pour

  • Tâches par lots entièrement automatisées — cette page est conçue pour un usage interactif ; pour les scripts, utilisez le point de terminaison API.
  • Du contenu dans d'autres formats — cet outil attend des données d'image.

Cas limites et erreurs fréquentes

  • Fichiers très volumineux

    Les gros fichiers prennent plus de temps et peuvent atteindre les limites de mémoire du navigateur — essayez d'abord avec un échantillon plus petit.

  • Vérification de la sortie ignorée

    Comparez les premières lignes ou pages de la sortie avec l'entrée avant de l'utiliser en production.

  • Fichiers provenant d'exportateurs inhabituels

    Certains fichiers utilisent des variantes de format qui ne se convertissent pas proprement — si la sortie semble incorrecte, réenregistrez le fichier depuis l'application qui l'a créé et réessayez.

Exemples

1. Animation séquentielle d'une courbe en S

Développeur Front-End

Contexte

Un développeur souhaite animer une courbe de Bézier complexe en révélant successivement chaque segment avec stroke-dashoffset.

Problème

Il a besoin de connaître la longueur exacte de chaque segment pour définir les keyframes CSS correspondants.

Utilisation

Coller la chaîne de la courbe dans le champ des données de tracé, renseigner le viewBox et définir la fraction dessinée souhaitée.

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

Résultat

Obtention de la longueur totale (282.01) et du point de transition exact (141.01) pour caler l'animation CSS.

2. Validation et audit de cadrage d'un arc SVG

Designer UI / Intégrateur

Contexte

Une icône contenant des arcs relatifs et une commande de fermeture 'z' doit être intégrée dans une grille stricte de 100x100.

Problème

S'assurer que la boîte englobante de l'arc ne déborde pas du viewBox de l'icône.

Utilisation

Saisir la commande compacte de l'arc dans le formulaire et indiquer le viewBox cible.

FAQ

Comment la longueur des courbes de Bézier et des arcs est-elle calculée ?

Elle est calculée par quadrature de Simpson adaptative avec une tolérance relative de 1e-9 sur les intégrales de vitesse des courbes cubiques, quadratiques et des arcs.

L'outil prend-il en charge les commandes relatives et les drapeaux d'arc compacts ?

Oui, toutes les syntaxes SVG standard (majuscules/minuscules, répétitions implicites et drapeaux sans espaces comme '0 1150 30') sont décodées.

À quoi sert la valeur 'Fraction dessinée (%)' ?

Elle simule l'état d'affichage progressif du tracé à un pourcentage donné pour prévisualiser le rendu des animations de tracé.

Puis-je obtenir les valeurs de décalage stroke-dashoffset pour mes animations CSS ?

Oui, la table fournit les distances cumulées de début et de fin par commande, en unités absolues et normalisées pour pathLength="1".

Comment fonctionne l'audit de viewBox ?

L'outil compare la boîte englobante analytique du tracé aux dimensions du viewBox pour détecter les débordements, calculer les marges et suggérer un cadrage optimal.

Accueil
Outils3201
Exemples593
Visualisations465
Visionneuses de fichiers103
Dossiers233
Étiquettes333
Images, audio et vidéo657

Outils de traitement, conversion et optimisation d’images, d’audio et de vidéo

Maths, dates et finance644

Calculateurs, outils numériques, logique de dates, statistiques et finance

Design et couleur297

Outils de couleur, mise en page, graphisme, style visuel et assistance design

Texte et rédaction209

Outils de rédaction, nettoyage, formatage, extraction et analyse de texte

Développement et Web193

Utilitaires développeur, réseau, débogage Web et assistants d’automatisation

Conversion et encodage175

Outils de conversion de formats, fichiers, archives, unités et encodages

Examen des sources FLAC/WAV et transmission des preuves
Revue et livraison d’un module de jeu promotionnel auto-hébergé
Relecture d'un lot de codes Stripe et contrôle préalable à l'importation
Tri technique des photos et transmission des candidates à la retouche
Structurer une capture d'interface, la relire et la transmettre au développement

© 2026 Elysia Tools. Tous droits réservés.

DocumentationTarifsÀ proposConditions d'utilisationPolitique de confidentialitéCookiesContact
Médias

Exemples SVG

Exemples de graphiques vectoriels évolutifs (SVG) démontrant diverses fonctionnalités et techniques SVG

Médias

Échantillons SVG

Graphiques vectoriels d'exemple pour la visionneuse SVG

Visualisation de données

Exemples D3.js Data Visualization

Exemples complets de visualisation de données D3.js incluant graphiques, cartes, animations et visualisations interactives

Formats de données

Exemples XML

Exemples de format XML (eXtensible Markup Language) de structures simples à complexes

Design

Inspecteur de fichiers de police (TTF / OTF / WOFF / WOFF2)

Téléversez une police TTF, OTF, WOFF ou WOFF2 (WOFF2 décompressée automatiquement) et inspectez toutes les métadonnées : famille/sous-famille/designer/copyright/version, nombre de glyphes, unitsPerEm, graisse et largeur, angle italique, drapeaux de style et boîte englobante ; carte thermique de couverture par blocs Unicode ; aperçu SVG des glyphes (texte personnalisable, échantillonnage auto pour les fontes d'icônes) ; ligatures liga et fonctionnalités OpenType ; axes fvar et instances nommées des fontes variables.

Media

Détecteur de progression d’accords

Estime localement les accords d’un audio et télécharge CSV, JSON, SVG et notes de méthode dans un ZIP.

Media

Minificateur et analyseur SVG

Analyse le marquage SVG, supprime les elements redondants, reduit la taille, compare avant/apres et exporte des fichiers nettoyes

Design

Planche de dessin en perspective à un point

Dessinez des pavés et des lignes vers un point de fuite mobile, apprenez par étapes et exportez en PNG ou SVG localement.

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

Résultat

Confirmation de la conformité du cadrage avec un statut aligné et décomposition de la longueur totale de 335.62 unités.

Minificateur et analyseur SVG
Verificateur d accessibilite
Générateur de codes QR artistiques, modules stylisés et logo intégré