Как получить ограничивающие координаты из SVG-пути

Question

Я работаю над проектом, в котором требуется перетаскивать перетаскиваемые элементы внутри сложных фигур, которые в идеале определяются элементами SVG Path, с использованием Javascript.

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

Я пытался использовать pathSegList, однако это возвращает неопределенное значение, и я прочитал, что это устарело.

Как мне получить список координат из элемента пути SVG, который я мог бы перевести в координаты X / Y для Javascript?

Answer 1

Вы можете использовать метод .getBBox() для элемента path.Взгляните на фрагмент:

console.log(document.getElementById('mypath').getBBox());

<svg width="300" height="100" viewBox="0 0 300 100" style="background:#efefef">
  <path id="mypath" d="M20,20 L40,20 40,40, 20,40 Z" fill="red" />
</svg>