# Marcheur de longueur des données de tracé SVG 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. > Page canonique: https://elysiatools.com/fr/tools/svg-path-data-cubic-quadratic-and-arc-command-length-walker - **Catégorie:** Design - **Mots-clés:** longueur tracé svg, calculateur path d, décalage stroke-dasharray, longueur arc bezier, flags arc svg, bbox chemin, animation dashoffset, poignées bezier cubiques, analyseur chemins svg ## Présentation 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é. ## Entrées - **Données de tracé (attribut d)** (textarea): M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80 - **ViewBox (facultatif)** (text): 0 0 200 200 - **Fraction dessinée (%)** (number) ## 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 - Tokenise la chaîne de caractères de l'attribut d, incluant les commandes relatives, les répétitions implicites et les flags compacts. - Convertit chaque segment en coordonnées absolues et résout les poignées tangentielles ainsi que les centres des arcs elliptiques selon SVG 2. - Calcule la longueur d'arc exacte de chaque commande par intégration numérique (quadrature de Simpson adaptative) et extrait les boîtes englobantes analytiques. - Gé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. ## Questions fréquentes ### 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. ## Outils associés - [Inspecteur de fichiers de police (TTF / OTF / WOFF / WOFF2)](https://elysiatools.com/fr/tools/font-file-inspector): 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. - [Détecteur de progression d’accords](https://elysiatools.com/fr/tools/audio-chord-progression-detector): Estime localement les accords d’un audio et télécharge CSV, JSON, SVG et notes de méthode dans un ZIP. - [Minificateur et analyseur SVG](https://elysiatools.com/fr/tools/svg-minifier-analyzer): Analyse le marquage SVG, supprime les elements redondants, reduit la taille, compare avant/apres et exporte des fichiers nettoyes - [Générateur de maillage de dégradés CSS (conique + radial)](https://elysiatools.com/fr/tools/css-gradient-mesh-generator): Génère le « maillage de dégradés » à la mode sur Dribbble/Behance depuis 2024 : plusieurs dégradés radiaux (tache de couleur → fondu vers du transparent de même teinte) empilés sur une couleur de base (éventuellement une couche conique), avec modes de fusion, grain de film SVG, dispositions seedées (coins / anneau / dispersion / grille), aperçu en direct, CSS copiable et classe arbitraire Tailwind. Les taches s'estompent en hex 8 chiffres #RRGGBB00, évitant l'anneau gris du mot-clé transparent. - [Générateur de snippets CSS glassmorphism / neumorphisme](https://elysiatools.com/fr/tools/glassmorphism-css-snippet-builder): Génère de bout en bout le snippet CSS glassmorphism ou neumorphisme complet : réglez flou, saturation, opacité de teinte, rayon, bordure, ombre extérieure et reflet supérieur ; en option superposition de grain SVG feTurbulence et repli @supports ; préfixe -webkit-backdrop-filter ajouté automatiquement (requis avant Safari 18) et correspondance des classes Tailwind (avec la note v3/v4), avec aperçu en direct de la carte sur fond dégradé. - [Générateur de codes QR artistiques, modules stylisés et logo intégré](https://elysiatools.com/fr/tools/qr-code-art-styled-module-and-logo-embed-generator): 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, des métadonnées par module et du verdict d’effacement Reed–Solomon. - [Pyramide de Biomasse et Flux d'Énergie (loi des 10%)](https://elysiatools.com/fr/tools/biomass-pyramid): Génère une pyramide trophique selon la loi de Lindeman : saisissez l'énergie/biomasse des producteurs E₁, l'efficacité de transfert (10% par défaut, 0.1–40%) et le nombre de niveaux (3–6). Vous obtenez l'énergie/biomasse de chaque niveau, son pourcentage des producteurs et la perte à chaque transfert (respiration, egestion, non-prédation). Rend une pyramide SVG colorée (largeurs à l'échelle √E pour la lisibilité ; les valeurs affichées sont toujours réelles) et un tableau par niveau, et explique pourquoi les pyramides d'énergie sont toujours droites alors que celles de nombres/biomasse peuvent s'inverser (ex. écosystèmes marins). Efficacités réelles typiques : 5–20%. - [Décomposeur d’ordre des traits chinois](https://elysiatools.com/fr/tools/chinese-stroke-order-decomposition): Décompose un caractère chinois en sa séquence de traits et sa structure de radicaux, et rend une démonstration SVG de l’ordre des traits avec coloration des composants. ## Exemples - [Exemples SVG](https://elysiatools.com/fr/samples/svg-samples): Exemples de graphiques vectoriels évolutifs (SVG) démontrant diverses fonctionnalités et techniques SVG - [Échantillons SVG](https://elysiatools.com/fr/samples/svg-viewer-samples): Graphiques vectoriels d'exemple pour la visionneuse SVG - [Exemples D3.js Data Visualization](https://elysiatools.com/fr/samples/d3js-data-visualization): Exemples complets de visualisation de données D3.js incluant graphiques, cartes, animations et visualisations interactives - [Exemples XML](https://elysiatools.com/fr/samples/xml-samples): Exemples de format XML (eXtensible Markup Language) de structures simples à complexes