> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions.
# Измеряйте длину контура SVG, не путая масштаб
> Измеряйте контуры SVG в пользовательских единицах браузера, учитывайте преобразования и номинальный размер, отличайте сумму контуров от pathLength и хода машины.
Source: https://perfectvector.com/ru/blog/measure-svg-path-length
Language: ru
Author: Irene Kim
Published: 2026-10-16T08:00:00+09:00
Для измерения контура SVG вызовите `getTotalLength()` у геометрического элемента, затем определите систему координат, стоящую за числом. Браузер возвращает длину в пользовательских единицах. Это число не является автоматически отображаемой длиной, измерением в миллиметрах или длиной перемещения машины.
Например, наша исходная диагональ имеет длину 50 пользовательских единиц. Равномерное масштабирование удваивает её длину в корневом пространстве до 100, а масштабирование только по горизонтали даёт около 72,111. Локальный результат API в обоих случаях остаётся 50. Эти числа отвечают на разные вопросы измерения.
## Измерьте известный отрезок до измерения графики
Вам нужны SVG с доступной геометрией и браузер, выполняющий встроенный SVG и JavaScript. Работайте с копией графики. До записи результата решите, нужны ли локальная геометрия, преобразованная геометрия или длина при заданном физическом размере.
Контур хранит маршрут командами перемещения, линии, кривой и замыкания. Пользовательская единица принадлежит системе координат SVG; не переименовывайте её в пиксель или миллиметр без проверки преобразования. [Справочник MDN по `getTotalLength()`](https://developer.mozilla.org/en-US/docs/Web/API/SVGGeometryElement/getTotalLength) определяет результат как вычисленную браузером длину контура в пользовательских единицах.
Этот полный пример HTML измеряет прямой отрезок. Сохраните его как HTML-файл и откройте в браузере:
```html
SVG length control
```
Изменение по горизонтали равно 30, по вертикали — 40, поэтому ожидаемая длина `sqrt(30² + 40²) = 50`. Показанный результат даёт известный контроль до доверия сложной кривой или импортированной эмблеме. Область просмотра 240 пикселей не превращает этот локальный результат в 100 пользовательских единиц.
В браузерном образце мы объявили допуск 0,01 пользовательской единицы. Контрольная четверть окружности радиуса 10 имеет аналитическую длину `5π`, примерно 15,708. Тестовый браузер сообщил Chrome 155 и вернул примерно 15,7102, в пределах допуска. Браузер вычисляет длину кривой численно, поэтому сохраняйте полезную точность и сравнивайте с подходящим допуском, а не требуйте одинаковых последних десятичных знаков от всех реализаций.
## Разделяйте локальную и преобразованную длины
Следующие два образца сохраняют то же `d="M10 10 L40 50"` и добавляют преобразования:
| Исходный отрезок | Локальная длина API | Длина после указанного преобразования в пользовательских единицах корневого SVG |
| ------------------ | ------------------- | ------------------------------------------------------------------------------- |
| Без преобразования | 50 | 50 |
| `scale(2)` | 50 | 100 |
| `scale(2 1)` | 50 | Около 72,111 |
Равномерное масштабирование умножает каждое направление на одинаковую величину, поэтому умножение локальной длины на 2 работает во второй строке. Неравномерное масштабирование действует на направления по-разному. В третьей строке изменённый отрезок проходит 60 единиц по горизонтали и 40 вниз: `sqrt(60² + 40²)`, а не `50 × 2`.
[Спецификация систем координат SVG](https://www.w3.org/TR/SVG2/coords.html#ViewBoxAttribute) объясняет, как преобразования и отображение `viewBox` задают системы координат. Назовите целевое пространство. Длина в пользовательских единицах корневого SVG всё ещё отличается от пикселей CSS области просмотра.
Для известного прямого отрезка мы перевели его концы в пользовательское пространство корневого SVG:
```js
const root = route.ownerSVGElement;
const relative = root.getCTM().inverse().multiply(route.getCTM());
const a = new DOMPoint(10, 10).matrixTransform(relative);
const b = new DOMPoint(40, 50).matrixTransform(relative);
const transformedLength = Math.hypot(b.x - a.x, b.y - a.y);
```
Обратная корневая матрица убирает отображение области просмотра корня; относительная матрица сохраняет преобразование контура в корневое пользовательское пространство. Фрагмент предполагает подключённый SVG с обратимыми матрицами и конкретный прямой отрезок выше. Его концы известны из исходника контура.
Для кривой расстояние между концами — только хорда. Чтобы измерить произвольно преобразованную кривую, преобразуйте геометрию в целевую систему координат и измерьте её либо используйте контролируемое численное приближение, сохраняющее отдельные контуры. Не применяйте эту формулу концов к кривой и не умножайте неравномерно преобразованную фигуру на один угаданный масштаб.
*Исходная созданная геометрия с живыми результатами браузера. Локальные длины, преобразованные длины корневого пространства и расчётные номинальные миллиметры подписаны отдельно. Целевое приложение и физическое производство не тестируются.*
## Переводите в миллиметры после фиксации отображения
Документ нашей исходной эмблемы объявляет `width="50mm"`, `height="50mm"` и `viewBox="0 0 100 100"`. При предполагаемом равномерном отображении это 0,5 мм на пользовательскую единицу. Внешняя ширина эмблемы составляет 80 единиц, поэтому номинальная ширина — 40 мм.
Суммарная длина двух контуров — 380 пользовательских единиц. При заявленном масштабе:
```text
50 mm / 100 user units = 0.5 mm per user unit
380 user units × 0.5 mm per user unit = 190 mm of contours
```
Это расчёт по заданным размерам. Мы не измеряли напечатанный объект, не проверяли монитор линейкой и не тестировали размеры импорта редактора. CSS может переопределить область просмотра SVG, а целевое приложение — масштабировать графику. Подтвердите переданные размеры в этом приложении до принятия номинального расчёта за производственное измерение.
Ширина всего документа также отличается от ширины графики внутри него. Если вместо этого задать только внешнюю ширину эмблемы 50 мм, её ширина 80 единиц даст другой коэффициент: `50 / 80 = 0.625 mm per unit`. Те же 380 единиц будут представлять 237,5 мм контуров. Записывайте, какую ширину задали; используйте [руководство по ограничивающему прямоугольнику SVG](https://perfectvector.com/ru/blog/svg-bounding-box), когда сначала нужно проверить габариты.
## `pathLength` калибрует расстояния без изменения геометрии
Мы также сделали копию исходного отрезка 50 единиц с `pathLength="1"`. Результат `getTotalLength()` остался 50. Атрибут не изменил концы и не сделал геометрическую длину равной единице.
[Спецификация API геометрии SVG](https://w3c.github.io/svgwg/svg2-draft/types.html#__svg__SVGGeometryElement__getTotalLength) прямо исключает `pathLength` из вычисляемого результата. [Справочник MDN по `pathLength`](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/pathLength) описывает калибровку поведения расстояния вдоль контура, включая штрихи обводки. Это полезно при создании эффекта с нормализованными расстояниями, но не заменяет измерение самого маршрута.
Для появления рисунка следуйте [руководству по анимации обводки SVG](https://perfectvector.com/ru/blog/svg-stroke-animation). Отделяйте калиброванные значения штрихов от геометрической длины, записываемой при проверке графики.
## Складывайте контуры, не превращая сумму в ход машины
У нашей эмблемы есть внешняя граница и ромбовидное отверстие. Исходный составной контур хранит обе замкнутые границы:
```xml
```
Внешний контур имеет длину 280 единиц, внутренний — 100. Составной контур вернул 380; измерение двух контуров как отдельных элементов path с последующим сложением тоже дало 380. [Спецификация контуров SVG](https://www.w3.org/TR/SVG2/paths.html) отличает новые подконтуры от линейных и замыкающих сегментов. Перемещение к отверстию не добавляет нарисованный соединительный отрезок между контурами.
Эта сумма описывает выбранную сохранённую геометрию. У трассированной толстой линии может быть два граничных маршрута; дублированный контур может повторно добавить геометрию; эмблема может содержать маленькие внутренние контуры, которые вы не собирались обрабатывать. Измеряйте действительно нужные объекты и контуры и проверяйте их до интерпретации суммы.
Ход машины — отдельный результат. Задание может включать перемещение между контурами, выбор порядка, повторные проходы или специфические изменения траектории целевым приложением. Наша браузерная сумма ничего из этого не устанавливает. Она также не даёт времени резки, расхода материала или успешного результата машины. Если нужен один центральный маршрут из сканированного рисунка, [руководство по однолинейному SVG](https://perfectvector.com/ru/blog/drawing-to-single-line-svg) рассматривает эту другую задачу восстановления.
## Запишите измерение вместе с предположениями
1. Определите выбранную геометрию и проверьте, содержит ли она несколько контуров или дубликаты.
2. Измерьте известный контроль и выбранные контуры в локальных пользовательских единицах.
3. Запишите преобразования и систему координат, нужную результату.
4. Установите предполагаемые размеры документа или графики до преобразования единиц.
5. Подписывайте значения калибровки, суммы контуров и измерения целевого приложения отдельно.
Если известный прямой контроль не возвращает 50 в объявленном допуске, проверьте выбранный элемент и изменение исходных данных. Если локальные результаты совпадают, а номинальный размер различается, изучите область просмотра, преобразования и масштаб целевого приложения до изменения контуров. Больше знаков после запятой не исправят неверное отображение координат.
Проверка геометрии файла завершена, когда другой человек может воспроизвести сумму выбранных контуров и понять единицы, отображение, допуск и включённые объекты. Наш сохранённый браузерный образец прошёл эти численные контроли. Импорт редактором, ход машины и физические размеры не тестировались.
Если единственный источник — растр, [процесс PerfectVector из изображения в вектор](https://perfectvector.com/ru/image-to-vector) сначала восстановит редактируемую геометрию SVG. Проверьте восстановленные контуры и отверстия, затем измерьте выбранную геометрию с явным масштабом. Векторизация создаёт контуры из пикселей; она не восстанавливает потерянный физический размер, не выводит осевую линию и не оценивает ход машины. Сохраняйте существующий векторный оригинал, если он доступен. Эмблема статьи создана напрямую, без трассировки.
## Частые вопросы
**Возвращает ли `getTotalLength()` пиксели или миллиметры?**
Он возвращает вычисленную браузером длину в пользовательских единицах SVG. Установите отображение координат и размеров до выражения результата в пикселях области просмотра или номинальных физических единицах.
**Почему масштабирование контура не меняет локальный результат API?**
Сохранённый локальный маршрут и его преобразованное представление находятся в разных системах координат. Наш отрезок с теми же данными возвращал локально 50 после равномерного и неравномерного масштабирования. Преобразованные длины были 100 и около 72,111 единицы корневого SVG.
**Означает ли `pathLength="1"` длину контура в одну единицу?**
Он даёт калибровочное значение для поддерживаемого поведения расстояния вдоль контура. Вычисленная длина API геометрии игнорирует атрибут; наш контроль 50 единиц по-прежнему возвращал 50.
**Можно ли оценить время резки по сумме контуров?**
Одной суммы недостаточно. Она не устанавливает созданные целевым приложением маршруты, перемещение между контурами, повторные проходы, изменения скорости или поведение материала. Используйте проверки задания реального приложения и подходящий производственный тест.
## Источники
1. [MDN: SVGGeometryElement.getTotalLength()](https://developer.mozilla.org/en-US/docs/Web/API/SVGGeometryElement/getTotalLength) — Вычисленная браузером длина контура в пользовательских единицах.
2. [W3C: API геометрии SVG](https://w3c.github.io/svgwg/svg2-draft/types.html#__svg__SVGGeometryElement__getTotalLength) — Вычисленная длина и её независимость от калибровки `pathLength`.
3. [W3C: Системы координат SVG](https://www.w3.org/TR/SVG2/coords.html#ViewBoxAttribute) — Область просмотра, `viewBox` и преобразования.
4. [MDN: pathLength](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/pathLength) — Калибровка поведения расстояния вдоль контура.
5. [W3C: Контуры SVG](https://www.w3.org/TR/SVG2/paths.html) — Подконтуры, рисуемые сегменты и команды замыкания.
***
Нужна редактируемая геометрия из растра до измерения? [Создайте вариант SVG](https://perfectvector.com/ru/image-to-vector), проверьте содержащиеся контуры и установите предполагаемый масштаб до записи длины.
## Explore
- [Read the HTML article](https://perfectvector.com/ru/blog/measure-svg-path-length)
- [Точечные обводки SVG: интервалы и круглые концы](https://perfectvector.com/ru/blog/svg-dotted-outlines.md)
- [Маркеры SVG в Leaflet: совместите кончик с iconAnchor](https://perfectvector.com/ru/blog/leaflet-svg-marker-anchor.md)
- [Product facts](https://perfectvector.com/product-facts.md)
- [FAQ](https://perfectvector.com/faq.md)
- [Pricing and credits](https://perfectvector.com/pricing.md)