# Caminante de longitud de datos de ruta SVG

Recorre una ruta SVG comando a comando (M/L/H/V/C/S/Q/T/A/Z) — longitud de arco por segmento, distancias acumuladas de stroke-dashoffset, cajas delimitadoras por subtrazado, vectores de control cúbicos, resolución de flags de arco y alineación ruta-vs-viewBox.

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

- **Categoría:** Design

- **Palabras clave:** longitud de ruta svg, calculadora path d, offset stroke-dasharray, longitud de arco bezier, flags de arco svg, bbox de ruta, animación dashoffset, controladores bezier cúbicos, analizador de rutas svg

## Descripción general

Pega cualquier atributo d de SVG y el caminante tokeniza el flujo completo de comandos —M m L l H h V v C c S s Q q T t A a Z z, repeticiones implícitas, flags de arco compactos como "0 1150 30"— y reconstruye cada segmento en coordenadas absolutas. Cada segmento recibe una longitud de arco precisa: fórmulas exactas para rectas, cuadratura de Simpson adaptativa (tolerancia relativa 1e-9) para las integrales de velocidad de Bézier cúbicas/cuadráticas y arcos elípticos, y extremos analíticos (raíces de la derivada) para cajas ajustadas en lugar de muestreo. La tabla de comandos muestra la distancia inicial/final a lo largo de la ruta, de modo que cualquier animación stroke-dasharray/stroke-dashoffset puede apuntar al límite exacto de un comando, con fragmentos listos para copiar en unidades de usuario y en forma normalizada pathLength="1". Los comandos S y T resuelven sus controladores reflejados para que veas el campo de vectores real del renderizador; los comandos A se resuelven mediante la parametrización extremo→centro de SVG 2, informando centro, θ1, Δθ y aplicando la regla de escalado de radios cuando la cuerda supera 2·rx/2·ry. Un viewBox opcional recibe una auditoría de alineación: desbordamiento, márgenes, desfase de centrado y viewBox ajustado sugerido.

## Entradas

- **Datos de ruta (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
- **Fracción dibujada (%)** (number)

## Cuándo usarlo

- Al preparar animaciones CSS o SVG basadas en stroke-dasharray y stroke-dashoffset que requieren límites de segmento precisos.
- Al auditar datos de trazados vectoriales complejos con arcos elípticos o curvas Bézier para verificar desbordamientos en el viewBox.
- Al depurar controladores reflejados de comandos S/T o resolver parámetros geométricos y flags en arcos SVG (comandos A).

## Cómo funciona

- Tokeniza la cadena de comandos (M, L, H, V, C, S, Q, T, A, Z) admitiendo sintaxis compacta y convirtiendo coordenadas relativas a absolutas.
- Calcula la longitud de arco por segmento usando fórmulas analíticas para rectas y cuadratura adaptativa de Simpson para curvas Bézier y arcos.
- Determina la caja delimitadora ajustada mediante raíces de derivadas y resuelve centros y ángulos de arcos elípticos según la especificación SVG 2.
- Genera la tabla con distancias acumuladas para dashoffset, previsualización gráfica interactiva y métricas de ajuste respecto al viewBox proporcionado.

## Casos de uso

- Calcular valores exactos de dashoffset para pausar o sincronizar animaciones de dibujo de líneas en momentos específicos del trazado.
- Inspeccionar curvas Bézier cúbicas con comandos S para visualizar la posición de los manejadores de control reflejados.
- Validar y depurar parámetros de arcos elípticos (radios, rotación del eje X, flags large-arc y sweep) convertidos a formato centro-ángulo.

## Preguntas frecuentes

### ¿Qué comandos SVG admite esta herramienta?

Soporta todos los comandos estándar SVG en mayúsculas y minúsculas: M, L, H, V, C, S, Q, T, A y Z, incluyendo repeticiones implícitas y flags compactos.

### ¿Cómo se calculan las longitudes de curvas Bézier y arcos?

Se calculan mediante integración numérica con cuadratura de Simpson adaptativa bajo una tolerancia relativa de 1e-9.

### ¿Cómo ayuda a configurar animaciones stroke-dashoffset?

La tabla desglosa la distancia acumulada al inicio y final de cada comando, entregando valores exactos en unidades de usuario y normalizados con pathLength="1".

### ¿Es obligatorio indicar el viewBox?

No, es opcional. Si se introduce, la herramienta audita márgenes, posibles desbordamientos y sugiere un viewBox ajustado a la geometría.

### ¿Qué hace el parámetro de fracción dibujada?

Permite simular visualmente el trazado progresivo de la ruta al porcentaje indicado sobre la vista previa interactiva.

## Herramientas relacionadas

- [Inspector de archivos de fuente (TTF / OTF / WOFF / WOFF2)](https://elysiatools.com/es/tools/font-file-inspector): Sube una fuente TTF, OTF, WOFF o WOFF2 (la WOFF2 se descomprime automáticamente) e inspecciona todos los metadatos: familia/subfamilia/diseñador/copyright/versión, número de glifos, unitsPerEm, peso y anchura, ángulo itálico, banderas de estilo y caja envolvente; mapa de calor de cobertura por bloques Unicode; vista previa SVG de glifos (texto personalizable, muestreo automático para fuentes de iconos); ligaduras liga y características OpenType; ejes fvar e instancias con nombre en fuentes variables.
- [Detector de progresiones de acordes](https://elysiatools.com/es/tools/audio-chord-progression-detector): Estima localmente los acordes de un audio y descarga CSV, JSON, SVG y notas del método en un ZIP.
- [Minificador y analizador SVG](https://elysiatools.com/es/tools/svg-minifier-analyzer): Analiza el marcado SVG, elimina elementos redundantes, reduce peso, compara antes y despues y exporta archivos limpios
- [Generador de malla de degradados CSS (cónica + radial)](https://elysiatools.com/es/tools/css-gradient-mesh-generator): Genera el «mesh de degradados» de moda en Dribbble/Behance desde 2024: varios degradados radiales (mancha de color → fundido a transparente del mismo tono) apilados sobre un color base (opcionalmente una capa cónica), con modos de mezcla, grano de película SVG, distribuciones con semilla (esquinas / anillo / dispersión / cuadrícula), vista previa en vivo, CSS copiable y clase arbitraria de Tailwind. Las manchas se desvanecen con hex de 8 dígitos #RRGGBB00 para evitar el anillo gris del término transparent.
- [Generador de snippets CSS glassmorphism / neumorfismo](https://elysiatools.com/es/tools/glassmorphism-css-snippet-builder): Genera el snippet CSS completo de glassmorphism o neumorfismo de punta a punta: ajusta desenfoque, saturación, opacidad del tinte, radio, borde, sombra externa y brillo superior; opcionalmente superposición de grano SVG feTurbulence y degradación @supports; incluye automáticamente el prefijo -webkit-backdrop-filter (obligatorio antes de Safari 18) y el mapeo a clases Tailwind (con la nota de diferencias v3/v4), con vista previa en vivo de la tarjeta sobre un fondo degradado.
- [Generador de códigos QR artísticos con módulos estilizados e inserción de logotipo](https://elysiatools.com/es/tools/qr-code-art-styled-module-and-logo-embed-generator): Genera códigos QR artísticos con colores de marca, degradados, módulos redondeados o de puntos y un logotipo central, con desglose de penalización de máscara ISO, metadatos por módulo y veredicto de borrado Reed–Solomon.
- [Pirámide de Biomasa y Flujo de Energía (ley del 10%)](https://elysiatools.com/es/tools/biomass-pyramid): Genera una pirámide trófica según la ley de Lindeman: introduzca la energía/biomasa de los productores E₁, la eficiencia de transferencia (10% por defecto, 0.1–40%) y el número de niveles (3–6). Obtiene la energía/biomasa de cada nivel, su porcentaje respecto a los productores y la pérdida en cada transferencia (respiración, egestión, no depredación). Renderiza una pirámide SVG en color (anchos en escala √E para visibilidad; las cifras siempre son reales) y una tabla por nivel, y explica por qué las pirámides de energía siempre son erectas mientras que las de números/biomasa pueden invertirse (p. ej. ecosistemas marinos). Eficiencias reales típicas: 5–20%.
- [Descompositor de orden de trazos chino](https://elysiatools.com/es/tools/chinese-stroke-order-decomposition): Descompone un carácter chino en su secuencia de trazos y estructura de radicales, y renderiza una demostración SVG del orden de trazos con coloración de componentes.

## Ejemplos

- [Ejemplos SVG](https://elysiatools.com/es/samples/svg-samples): Ejemplos de Gráficos Vectoriales Escalables (SVG) que demuestran varias características y técnicas SVG
- [Muestras SVG](https://elysiatools.com/es/samples/svg-viewer-samples): Gráficos vectoriales de muestra para el visor SVG en el navegador
- [Ejemplos D3.js Data Visualization](https://elysiatools.com/es/samples/d3js-data-visualization): Ejemplos completos de visualización de datos D3.js incluyendo gráficos, mapas, animaciones y visualizaciones interactivas
- [Ejemplos de XML](https://elysiatools.com/es/samples/xml-samples): Ejemplos de formato XML (eXtensible Markup Language) desde estructuras simples hasta complejas