getPointAtLength с SVG не работает правильно

Question

У меня есть большой файл SVG, и все его данные находятся в одном элементе. Это что-то вроде этого:

<path d="M724 1541c133,-400 36,-222 334,-520 76,-75 440,-37 557,-37 145,291 111, 
    -32 111,445 0,344 -3,260 483,260 457,0 177,-111 409,-111 0,-62 0,-124 0,-186 
    -368,0 190,-111 -409,-111 -143,0 2,40 -148,223 ... huge SVG "/> 

Я преобразование этого огромного SVG в полилинию с помощью функции «getPointAtLength», как этот парень ответил на мой вопрос: https://stackoverflow.com/a/39405746/2934699

Проблема заключается в следующем: это SVG не является непрерывным , он имеет некоторые формы (прямоугольники, круги ...), которые не связаны. Но когда я использую метод ссылки, все мои формы подключаются. Есть ли способ решить эту проблему?

Answer 1

Есть два возможных подхода, которые я могу придумать, чтобы решить вашу проблему.

1. Быстрый и грязный

Как вы проходным пути, рассчитать расстояние от последней точки пути. Если это расстояние превышает некоторый предел, вы можете подумать, что вы перешли в новый подпуть. Итак, начните новую полилинию.

2. Более точные, но хитрее

Preprocess путь, используя mypath.pathSegList свойства. Этот вызов возвращает список команд пути в пути.

1. Затем пройдите через pathSegList и обратите внимание, где каждая команда перемещения. Они отмечают начало каждого подкаталога
2. По мере того, как вы пересекаете траекторию, вызовите функцию mypath.getPathSegAtLength(). Он возвращает индекс записи pathseg на этой длине.
3. Сравните это с данными, записанными на шаге 1, чтобы увидеть, если вы переехали в новый подпуть
4. Если у вас есть, начать новую полилинию (или полигон)

Одна сложность заключается в том, что Chrome имеет устаревшая поддержка свойства pathSegList и вместо этого переместилась в новый API SVG2 для этого (mypath.getPathData()). К счастью, для Chrome добавлена ​​поддержка полиса, чтобы добавить обратно поддержку старого API. Или вы можете переключиться на новый API и использовать другой полиполк, чтобы новый API работал в старых браузерах.

You can find details on the two polyfills here