SVG - Как мне сократить <path>пополам?

Question

Мне нужно вырезать существующий путь (кривую) в определенной точке в JavaScript.Например, если у меня есть следующий путь:

<path stroke-width="3"
      stroke="black"
      stroke-linecap="round"
      stroke-linejoin="round"
      id="line_test"
      d="M125,165 C125,165 125,164 125,164">
</path>

Из этого я могу получить среднюю точку следующим образом:

var line = document.getElementById("line_test");
var length = line.getTotalLength();
var midpoint = line.getPointAtLength(length/2);

Как только я получу эту среднюю точку, я хочу удалитьОстальная часть пути полностью.Есть ли функция, которая позволит мне получить подпуть?Библиотека чертежей мне не подходит.

Answer 1

Да, есть, он называется getPathSegAtLength (доступно для элементов пути) и возвращает индекс в pathSegList , который, например, можно использовать для нарезки там пути pathSegList.

pathSegList является списком, похожим на массив, и если вы используете некоторые из самых последних браузеров, вы можете использовать обычную запись массива для пошагового перемещения по списку, но он более совместим для использования интерфейсаопределено в SVG 1.1 прямо сейчас.