获取 SVG 路径的边界框答案

【问题标题】：Get bounding box of SVG path获取 SVG 路径的边界框
【发布时间】：2016-10-29 03:38:27
【问题描述】：

我想要这个页面做什么

http://codepen.io/netsi1964/full/vNoemp/

我有路径，需要知道它的边界框是一个矩形元素，它是 x,y,width 和 height 给定代码

<path d="M147.5 55.8c-5.8-7.2-13.6-14.4-25.5-14.4-8.4 0-15.4 8.2-27 8.2-9 0-13-7.8-23-7.8C51.4 41.8 31 60.4 31 84.5c0 12.8 4.2 32.5 13.6 49.7C51 146.7 59.4 155 69 155c6.7 0 14.7-6.3 24.2-6.3 8.4 0 16.2 5.6 23.8 5.6 18 0 35-23.5 35-39.3 0-.8-.3-1.4-.3-2v-1c-11.8-6.3-18.2-15.7-18.2-29.3 0-11 4.8-20.5 13.6-26.7l.5-.2zm-53-8.8c13.7-4.2 26.3-14.4 26.3-32 0-1.5-.2-3.3-.4-5.3l-.2-.8C106.4 12.6 94 23.4 94 40.3c0 1.6.2 3.6.6 5.8v.8z" style="translate(0px,-212.47488403320312px) scale(1,1)" >

并且知道矩形属性

【问题讨论】：

标签： svg intersection codepen

【解决方案1】：

使用纯 JavaScript：为您的路径指定一个 ID，并使用 getBBox() 获取其边界框。

var myPathBox = document.getElementById("myPath").getBBox();
console.log(myPathBox);

这是一个演示：

var myPathBox = document.getElementById("myPath").getBBox();
console.log(myPathBox);

<svg width="400" height="400">
	<path id="myPath" d="M147.5 55.8c-5.8-7.2-13.6-14.4-25.5-14.4-8.4 0-15.4 8.2-27 8.2-9 0-13-7.8-23-7.8C51.4 41.8 31 60.4 31 84.5c0 12.8 4.2 32.5 13.6 49.7C51 146.7 59.4 155 69 155c6.7 0 14.7-6.3 24.2-6.3 8.4 0 16.2 5.6 23.8 5.6 18 0 35-23.5 35-39.3 0-.8-.3-1.4-.3-2v-1c-11.8-6.3-18.2-15.7-18.2-29.3 0-11 4.8-20.5 13.6-26.7l.5-.2zm-53-8.8c13.7-4.2 26.3-14.4 26.3-32 0-1.5-.2-3.3-.4-5.3l-.2-.8C106.4 12.6 94 23.4 94 40.3c0 1.6.2 3.6.6 5.8v.8z" style="translate(0px,-212.47488403320312px) scale(1,1)" >
	</svg>

【讨论】：

@Gerado 我可以得到 x1,y1 和 x2,y2 ，而不是 x,y,width,heigh 吗？
@rafatmansour x2 就是x1 + width，y2 就是y1 + height。另外，看看getBoundingClientRect()：developer.mozilla.org/en/docs/Web/API/Element/…
@Gerado 但是如果我假设它会在没有旋转的情况下水平绘制，但我需要 x2,y2 来指定终点
@rafatmansour 两个函数都已经计算了transform，如果有的话。

【解决方案2】：

我知道这是一个老问题，但我想我会将这个变体放到 Furtado 的答案中以供参考。

获取路径边界框的简单方法。

确保路径（或任何其他 SVG 元素上都有 id。
在 Chrome（或 FF 或者可能是 IE）中打开 svg 文件。
检查图像
在检查工具中打开控制台。
输入JS：document.getElementById("myPath").getBBox(); （在哪里 myPath 是 id)

边界框信息将显示在控制台中。

同样的方法，只是不需要自定义代码。

【讨论】：

自定义代码是什么意思？这与 Gerardo 的回答有何不同？
正如我所说，它只是它的一个变体并没有什么不同。他的回答显示了嵌入 svg 图像的 JavaScript 代码。如果 svg 被用作最常见的 img 标签，这将不起作用。因此，您必须在其中创建一个自定义页面。我的版本只是让您使用浏览器工具和一些 js 来查找相同的信息。因此，没有自定义代码。