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

Question

我正在开发一个项目，该项目要求使用Javascript在SVG Path元素理想地定义的复杂形状内限制可拖动元素。

我对定义边界的其他方法持开放态度，但SVG可以更好地与源材料结合在一起。

我尝试使用pathSegList，但是此方法返回undefined，并且我已阅读它已弃用的内容。

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

Answer 1

您可以在path元素上使用.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>