# Обходчик длины данных SVG-пути

Проходите SVG-путь команда за командой (M/L/H/V/C/S/Q/T/A/Z) — длины дуг по сегментам, накопленные расстояния stroke-dashoffset, bbox по подпутям, векторы управления кубических кривых, решение флагов дуги и выравнивание путь-vs-viewBox.

> Каноническая страница: https://elysiatools.com/ru/tools/svg-path-data-cubic-quadratic-and-arc-command-length-walker

- **Категория:** Design

- **Ключевые слова:** длина svg пути, калькулятор path d, смещение stroke-dasharray, длина дуги безье, флаги дуги svg, bbox пути, анимация dashoffset, управляющие точки безье, анализатор svg путей

## Обзор

Вставьте любой атрибут d элемента SVG — обходчик токенизирует весь поток команд (M m L l H h V v C c S s Q q T t A a Z z, неявные повторы, компактные флаги дуги вида «0 1150 30») и перестраивает каждый сегмент в абсолютных координатах. Для каждого сегмента вычисляется точная длина: точные формулы для отрезков, адаптивная квадратура Симпсона (относительная точность 1e-9) для интегралов скорости кубических/квадратичных Безье и эллиптических дуг, аналитические экстремумы (корни производной) для плотных bbox вместо выборки. Таблица команд показывает начальное/конечное расстояние вдоль пути, так что любую анимацию stroke-dasharray/stroke-dashoffset можно привязать к точной границе команды; готовы фрагменты и в пользовательских единицах, и в нормализованном виде pathLength="1". Команды S и T разворачивают отражённые управляющие точки, показывая реальное векторное поле рендерера; команды A решаются через параметризацию «концы→центр» из SVG 2 с отчётом о центре, θ1, Δθ и применением правила масштабирования радиусов, когда хорда длиннее 2·rx/2·ry. Необязательный viewBox получает аудит выравнивания: выход за границы, отступы, смещение центрирования и предложенный плотный viewBox.

## Входные данные

- **Данные пути (атрибут d)** (textarea): M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80
- **ViewBox (необязательно)** (text): 0 0 200 200
- **Доля отрисовки (%)** (number)

## Когда использовать

- При создании анимаций рисования линий через stroke-dasharray и stroke-dashoffset с точной остановкой на границах сегментов.
- При отладке сложных Безье-кривых (C, S, Q, T) и эллиптических дуг (A) с проверкой флагов large-arc и sweep.
- При аудите геометрии пути относительно viewBox для выявления выходов за границы, отступов и расчета плотного bounding box.

## Как это работает

- Парсер токенизирует строку команд атрибута d, нормализует относительные координаты в абсолютные и раскрывает неявные повторы и отраженные контрольные точки S и T.
- Математическое ядро рассчитывает длины отрезков, применяет квадратуру Симпсона для интегралов скорости кривых Безье и дуг, а также находит корни производных для точного вычисления bbox.
- Инструмент строит пошаговую таблицу расстояний, генерирует интерактивный предпросмотр с визуализацией векторных ручек и выводит готовые CSS-сниппеты смещения.

## Сценарии использования

- Расчет ключевых кадров stroke-dashoffset для пошаговой анимации инфографики и схем.
- Диагностика некорректных параметров эллиптических дуг и невидимых петель в векторных иконках.
- Оптимизация размеров viewBox и устранение лишних полей в SVG-спрайтах.

## Частые вопросы

### Как рассчитывается длина кривых Безье и дуг?

Для прямолинейных отрезков используются аналитические формулы расстояния, а для кривых Безье и эллиптических дуг — адаптивная квадратура Симпсона с высокой точностью.

### Зачем анализировать команды S и T отдельно?

Команды S и T используют неявные отраженные контрольные точки от предыдущих кривых; инструмент вычисляет их абсолютные координаты для точной визуализации векторов.

### Что показывает аудит выравнивания viewBox?

Он сравнивает аналитический bounding box контура с заданным viewBox, выявляя выход геометрии за границы и предлагая оптимальные плотные размеры.

### Поддерживаются ли сжатые флаги дуги SVG?

Да, токенизатор корректно разбирает компактную запись параметров дуги A, например последовательности флагов без пробелов вроде 0 1150 30.

### В каких единицах выдаются значения для stroke-dashoffset?

Результаты предоставляются как в исходных пользовательских единицах пути, так и в нормализованном формате для использования с pathLength="1".

## Связанные инструменты

- [Инспектор файлов шрифтов (TTF / OTF / WOFF / WOFF2)](https://elysiatools.com/ru/tools/font-file-inspector): Загрузите шрифт TTF, OTF, WOFF или WOFF2 (WOFF2 автоматически распаковывается) и изучите все метаданные: семейство/подсемейство/дизайнер/копирайт/версия, число глифов, unitsPerEm, насыщенность и ширину, угол наклона, флаги стиля и bounding box; тепловую карту покрытия по блокам Юникода; SVG-предпросмотр глифов (свой текст, автосбор для иконочных шрифтов); лигатуры liga и возможности OpenType; оси fvar и именованные экземпляры вариативных шрифтов.
- [Детектор последовательности аккордов](https://elysiatools.com/ru/tools/audio-chord-progression-detector): Локально оценивает аккорды в аудио и сохраняет CSV, JSON, SVG и описание метода в ZIP.
- [Минификатор и анализатор SVG](https://elysiatools.com/ru/tools/svg-minifier-analyzer): Анализирует SVG-разметку, удаляет лишние элементы, уменьшает размер, показывает сравнение до/после и экспортирует очищенные файлы
- [Генератор градиентной сетки CSS (коническая + радиальная)](https://elysiatools.com/ru/tools/css-gradient-mesh-generator): Генерирует «градиентную сетку», популярную на Dribbble/Behance с 2024-го: несколько радиальных градиентов (цветовое пятно → растворение в прозрачный того же тона) поверх базового цвета (опционально — конический слой), с режимами наложения, SVG-зерном, сидированными раскладками (углы / кольцо / разброс / сетка), живым превью, копируемым CSS и Tailwind-классом. Пятна гаснут через 8-значный hex #RRGGBB00 — без серого кольца ключевого слова transparent.
- [Генератор CSS-сниппетов: глассморфизм / неоморфизм](https://elysiatools.com/ru/tools/glassmorphism-css-snippet-builder): Сквозной генератор полного CSS-сниппета глассморфизма или неоморфизма: настройте размытие, насыщенность, непрозрачность оттенка, радиус, рамку, внешнюю тень и верхний блик; опционально — зернистая SVG feTurbulence-текстура и @supports-фолбэк; автоматически добавляется префикс -webkit-backdrop-filter (обязателен до Safari 18) и маппинг на классы Tailwind (с заметкой о различиях v3/v4), плюс живой предпросмотр карточки на градиентном фоне.
- [Генератор арт-QR-кодов со стилизованными модулями и вставкой логотипа](https://elysiatools.com/ru/tools/qr-code-art-styled-module-and-logo-embed-generator): Создаёт арт-QR с фирменными цветами, градиентами, скруглёнными или точечными модулями и центральным логотипом, с разбором ISO-штрафов маски, метаданными по модулям и вердиктом по стираниям Рида–Соломона.
- [Пирамида биомассы и поток энергии (правило 10%)](https://elysiatools.com/ru/tools/biomass-pyramid): Строит трофическую пирамиду по закону Линдемана: введите энергию/биомассу продуцентов E₁, эффективность переноса (по умолчанию 10%, диапазон 0.1–40%) и число уровней (3–6). Получаете энергию/биомассу каждого уровня, его долю от продуцентов и потери на каждом переносе (дыхание, экскреция, непоедание). Рисует цветную SVG-пирамиду (ширины в масштабе √E для наглядности; числовые подписи всегда истинные) и таблицу по уровням, объясняя, почему пирамиды энергии всегда прямые, а пирамиды чисел/биомассы могут быть перевёрнутыми (например, морские экосистемы). Типичные измеренные эффективности: 5–20%.
- [Разборщик порядка черт китайских иероглифов](https://elysiatools.com/ru/tools/chinese-stroke-order-decomposition): Разбирает китайский иероглиф на последовательность черт и структуру ключей, выводит SVG-демонстрацию порядка черт с расцветкой компонентов.

## Примеры

- [SVG Примеры](https://elysiatools.com/ru/samples/svg-samples): Примеры масштабируемой векторной графики (SVG) демонстрирующие различные возможности и техники SVG
- [Образцы SVG](https://elysiatools.com/ru/samples/svg-viewer-samples): Образцы векторной графики для браузерного SVG просмотрщика
- [Примеры D3.js Визуализации Данных](https://elysiatools.com/ru/samples/d3js-data-visualization): Комплексные примеры визуализации данных D3.js, включая диаграммы, карты, анимации и интерактивные визуализации
- [Примеры XML](https://elysiatools.com/ru/samples/xml-samples): Примеры формата XML (eXtensible Markup Language) от простых до сложных структур