如何从SVG路径中获取边界坐标

Question

我正在研究一个需要使用JavaScript的SVG路径元素定义的复杂形状内部有限拖动元素的项目。

我对定义界限的其他方式开放，但是SVG可以更好地与原始材料联系在一起。

我已经尝试使用PathSeglist，但是这返回了未定义的返回，并且我已经读过它是不建议的。

我将如何从SVG路径元素中获取坐标列表，我可以将其转换为JavaScript的X/Y坐标？

Answer 1

您可以在路径元素上使用.getBBox()方法。看看片段：

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>