# Caminhante de comprimento de dados de caminho SVG

Percorra um caminho SVG comando a comando (M/L/H/V/C/S/Q/T/A/Z) — comprimentos de arco por segmento, distâncias cumulativas de stroke-dashoffset, caixas delimitadoras por subcaminho, vetores de controle cúbicos, resolução de flags de arco e alinhamento caminho-vs-viewBox.

> Página canônica: https://elysiatools.com/pt/tools/svg-path-data-cubic-quadratic-and-arc-command-length-walker

- **Categoria:** Design

- **Palavras-chave:** comprimento de caminho svg, calculadora path d, deslocamento stroke-dasharray, comprimento de arco bezier, flags de arco svg, bbox de caminho, animação dashoffset, controles bezier cúbicos, analisador de caminhos svg

## Visão geral

Cole qualquer atributo d de SVG e o caminhante tokeniza o fluxo completo de comandos — M m L l H h V v C c S s Q q T t A a Z z, repetições implícitas, flags de arco compactas como "0 1150 30" — e reconstrói cada segmento em coordenadas absolutas. Cada segmento recebe um comprimento de arco preciso: fórmulas exatas para retas, quadratura de Simpson adaptativa (tolerância relativa 1e-9) para as integrais de velocidade de Bézier cúbicas/quadráticas e arcos elípticos, e extremos analíticos (raízes da derivada) para caixas justas em vez de amostragem. A tabela de comandos mostra a distância inicial/final ao longo do caminho, então qualquer animação stroke-dasharray/stroke-dashoffset pode mirar na fronteira exata de um comando, com trechos prontos para copiar em unidades de usuário brutas e na forma normalizada pathLength="1". Comandos S e T resolvem seus controles refletidos, mostrando o campo vetorial real do renderizador; comandos A são resolvidos pela parametrização extremos→centro do SVG 2, relatando centro, θ1, Δθ e aplicando a regra de escalonamento de raios quando a corda excede 2·rx/2·ry. Um viewBox opcional recebe uma auditoria de alinhamento: transbordamento, margens, deslocamento de centralização e um viewBox justo sugerido.

## Entradas

- **Dados do caminho (atributo d)** (textarea): M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80
- **ViewBox (opcional)** (text): 0 0 200 200
- **Fração desenhada (%)** (number)

## Quando usar

- Ao criar animações precisas de traçado SVG com stroke-dasharray e stroke-dashoffset em CSS ou JavaScript.
- Ao inspecionar coordenadas absolutas, pontos de controle refletidos de curvas S/T e parametrização de arcos elípticos A.
- Ao diagnosticar problemas de corte, transbordamento ou cálculo de bounding box em relação ao viewBox do SVG.

## Como funciona

- Tokeniza a string do atributo d, normalizando comandos absolutos e relativos (M, L, H, V, C, S, Q, T, A, Z) e resolvendo flags compactas.
- Calcula o comprimento exato de cada segmento por integração numérica adaptativa de Simpson para curvas de Bézier/arcos e fórmulas diretas para retas.
- Determina extremos analíticos para gerar o bounding box exato e calcula as distâncias acumuladas do traçado.
- Compara as dimensões totais com o viewBox fornecido e simula a porcentagem de traçado desenhado na pré-visualização.

## Casos de uso

- Cálculo de pontos de parada (offsets) exatos para animações sequenciais de linha em infográficos ou ícones interativos.
- Inspeção e depuração de arcos SVG complexos para verificar centro, ângulos (θ1, Δθ) e flags de raio.
- Ajuste e otimização de viewBox para eliminar espaços vazios ao redor de ícones vetoriais.

## Perguntas frequentes

### Como a ferramenta calcula o comprimento de curvas de Bézier e arcos?

Utiliza quadratura adaptativa de Simpson com tolerância relativa de 1e-9 nas integrais de velocidade de curvas cúbicas, quadráticas e arcos elípticos.

### A ferramenta aceita comandos SVG em formato relativo?

Sim, todos os comandos relativos (como m, l, c, a, h, v) são convertidos internamente para coordenadas absolutas mantendo o estado exato da caneta.

### Como são calculados os pontos de controle de comandos S e T?

Os pontos de controle ausentes são calculados refletindo o último ponto de controle do comando cúbico ou quadrático anterior em relação ao ponto atual.

### Para que serve o campo Fração desenhada (%)?

Ele simula visualmente a animação de stroke-dashoffset na pré-visualização, mostrando o traçado percorrido até a porcentagem escolhida.

### O que a auditoria de viewBox verifica?

Avalia se o bounding box do caminho transborda o viewBox informado, calcula margens e sugere um viewBox justo e ajustado aos extremos.

## Ferramentas relacionadas

- [Inspetor de arquivos de fonte (TTF / OTF / WOFF / WOFF2)](https://elysiatools.com/pt/tools/font-file-inspector): Envie uma fonte TTF, OTF, WOFF ou WOFF2 (WOFF2 é descomprimida automaticamente) e inspecione todos os metadados: família/subfamília/designer/copyright/versão, número de glifos, unitsPerEm, peso e largura, ângulo itálico, bandeiras de estilo e caixa delimitadora; mapa de calor de cobertura por blocos Unicode; pré-visualização SVG de glifos (texto personalizável, amostra automática para fontes de ícones); ligaduras liga e recursos OpenType; eixos fvar e instâncias nomeadas de fontes variáveis.
- [Detector de progressão de acordes](https://elysiatools.com/pt/tools/audio-chord-progression-detector): Estima localmente os acordes de um áudio e reúne CSV, JSON, SVG e notas do método em um ZIP.
- [Minificador e analisador SVG](https://elysiatools.com/pt/tools/svg-minifier-analyzer): Analisa a marcacao SVG, remove elementos redundantes, reduz tamanho, compara antes e depois e exporta arquivos limpos
- [Gerador de malha de gradiente CSS (cônica + radial)](https://elysiatools.com/pt/tools/css-gradient-mesh-generator): Gera a «malha de degradês» em alta na Dribbble/Behance desde 2024: vários degradês radiais (mancha de cor → esmaecimento para transparente da mesma cor) sobre uma cor-base (opcionalmente uma camada cônica), com modos de mistura, granulação de filme SVG, disposições com semente (cantos / anel / dispersão / grade), prévia ao vivo, CSS copiável e classe arbitrária do Tailwind. As manchas esmaecem via hex de 8 dígitos #RRGGBB00, evitando o anel cinza da palavra-chave transparent.
- [Gerador de snippets CSS glassmorphism / neumorfismo](https://elysiatools.com/pt/tools/glassmorphism-css-snippet-builder): Gera de ponta a ponta o snippet CSS completo de glassmorphism ou neumorfismo: ajuste desfoque, saturação, opacidade da tonalidade, raio, borda, sombra externa e brilho superior; opcionalmente sobreposição de grão SVG feTurbulence e fallback @supports; inclui automaticamente o prefixo -webkit-backdrop-filter (obrigatório antes do Safari 18) e o mapeamento para classes Tailwind (com a nota v3/v4), com pré-visualização ao vivo sobre fundo em gradiente.
- [Gerador de QR artístico com módulos estilizados e incorporação de logotipo](https://elysiatools.com/pt/tools/qr-code-art-styled-module-and-logo-embed-generator): Gera QR artísticos com cores de marca, degradês, módulos arredondados ou em pontos e logotipo central — com a decomposição das penalidades de máscara ISO, metadados por módulo e veredito de apagamento Reed–Solomon.
- [Pirâmide de Biomassa e Fluxo de Energia (lei dos 10%)](https://elysiatools.com/pt/tools/biomass-pyramid): Gera uma pirâmide trófica segundo a lei de Lindeman: informe a energia/biomassa dos produtores E₁, a eficiência de transferência (10% padrão, 0.1–40%) e o número de níveis (3–6). Obtém a energia/biomassa de cada nível, sua porcentagem dos produtores e a perda em cada transferência (respiração, egestão, não predação). Renderiza uma pirâmide SVG colorida (larguras em escala √E para visibilidade; os valores exibidos são sempre reais) e uma tabela por nível, e explica por que pirâmides de energia são sempre eretas enquanto as de números/biomassa podem inverter-se (ex. ecossistemas marinhos). Eficiências reais típicas: 5–20%.
- [Decompositor de ordem de traços chineses](https://elysiatools.com/pt/tools/chinese-stroke-order-decomposition): Decompõe um caractere chinês na sua sequência de traços e estrutura de radicais, e renderiza uma demonstração SVG da ordem dos traços com coloração de componentes.

## Exemplos

- [Exemplos SVG](https://elysiatools.com/pt/samples/svg-samples): Exemplos de Gráficos Vetoriais Escaláveis (SVG) demonstrando vários recursos e técnicas SVG
- [Amostras SVG](https://elysiatools.com/pt/samples/svg-viewer-samples): Gráficos vetoriais de amostra para o visualizador SVG
- [Exemplos D3.js Data Visualization](https://elysiatools.com/pt/samples/d3js-data-visualization): Exemplos abrangentes de visualização de dados D3.js incluindo gráficos, mapas, animações e visualizações interativas
- [Exemplos de XML](https://elysiatools.com/pt/samples/xml-samples): Exemplos de formato XML (eXtensible Markup Language) de estruturas simples a complexas