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

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

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

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

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

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

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

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

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

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

Elysia Tools

Навигация

Design

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

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

Детали

С чем помогает этот инструмент

Вставьте любой атрибут 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.

Запуск

Запустить этот инструмент

Заполните форму, запустите инструмент и посмотрите результат на этой же странице.

Примеры

Примеры для этого инструмента

Связано

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

С чем помогает этот инструмент

Запустить этот инструмент

Примеры для этого инструмента

Продолжить с похожими инструментами и темами

Узнайте, когда использовать этот инструмент, что он поддерживает и как его применяют пользователи.

Ключевые факты

Обзор

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

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

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

Примеры

1. Расчет контрольных точек S-кривой Безье

2. Анализ эллиптической дуги и выравнивания viewBox

FAQ

SVG Примеры

Образцы SVG

Примеры D3.js Визуализации Данных

Примеры XML

Инспектор файлов шрифтов (TTF / OTF / WOFF / WOFF2)

Детектор последовательности аккордов

Минификатор и анализатор SVG

Генератор градиентной сетки CSS (коническая + радиальная)