使用 jQuery 获取 SVG 路径的边界框答案

【问题标题】：Get bounding box for SVG path using jQuery使用 jQuery 获取 SVG 路径的边界框
【发布时间】：2013-04-28 22:27:36
【问题描述】：

我想在 jquery 中获取 svg 路径的 getBBox()。我试过这样

$("#"+ path id)[0].getBBox() -> returns x=0,y=0,width=0,height=0

我已经添加了一个 SVG 元素的路径。我在 SVG 中尝试了一些其他元素，例如文本节点，在这种情况下它返回一些边界框值。

如何计算 SVG 中路径的边界框？

<path id="container_svg_John_0" fill="none" stroke-width="3" stroke="url(#container_svg_John0Gradient)" stroke-linecap="butt" stroke-linejoin="round" d="M -2390.2 -125.8888888888889 L 0 0 M 0 0 L 251.60000000000002 -45.77777777777778 M 251.60000000000002 -45.77777777777778 L 503.20000000000005 -11.444444444444445 M 503.20000000000005 -11.444444444444445 L 629 -183.11111111111111 "/>

【问题讨论】：

也许您可以在这个简单的实用程序中找到灵感，它可以让您输入路径然后显示边界框。 codepen.io/netsi1964/full/vNoemp

标签： svg jquery-svg

【解决方案1】：

getBBox 是原生 SVG 方法，不是 jquery 的一部分，所以你需要编写

$("#"+ path id)[0].getBBox()

example

如果您在示例中得到一个非零值并且在您的代码中得到一个零值，那么肯定还有其他一些您没有向我们展示的内容。

最可能的原因是路径是<defs> 的子路径，即您只是在模式或clipPath 中间接使用它，或者它的显示样式为none，在这种情况下它不会被渲染所以不会有边界框。

【讨论】：

这是一个糟糕的解决方案/响应。我已经知道这一点并且也尝试过这样但它仍然返回零。
在这种情况下它将返回“0”值。我也尝试了 rect 元素，但它仅在所有浏览器中返回“零”。 stackoverflow.com/questions/16393361/…
如果我使用 Firefox 单击上面给出的答案中的“示例”链接，我会得到 -2390。您是说使用 Firefox 并单击链接会得到 0？
对我来说，这在所有浏览器中也会返回“-2390”。但在我的项目中，我正在调试它返回“零”时的值，我也将它添加到 svg 对象。我不知道确切的原因？我可以知道在哪种情况下它返回“零”
如果矩形/路径的样式为 display:none 或者是的子元素，则返回 0，因为在这两种情况下，矩形/路径都没有实际绘制。

【解决方案2】：

~~Webkit 中的getBBox() 原生实现有问题，你可以找到bug tracker here~~。其实现在已经修复了

一个解决方案是使用一个 SVG 库，它有自己的算法来计算这些问题，其中之一是 Raphael.js。

您可以使用 Raphael 的 element.getBBox()，它的作用与原生 getBBox() 相同。

【讨论】：

其实，it doesn't work on Chrome。 sample there 显示了当前 Chrome 版本 (45) 和最新 IE/FF 之间的问题和差异。
Chrome 现在是正确的 - 上面评论中发布的示例中的差异是由于笔划宽度造成的。

【解决方案3】：

我也很难让 JQuery 语法为我工作。这返回了 Uncaught TypeError: Object [object Object] has no method 'getBBox'：

console.log($("#testtext").getBBox().width);

...因为我省略了数组索引（感谢@Christian Vielma，下面）！

然而标准 Javascript 对我有用，我能够在 Chrome 控制台中显示（在我的情况下）RECT 的宽度：

console.log(document.getElementById("testtext").getBBox().width);

所以你可以试试。

【讨论】：

我相信你必须使用 $('#testtext')[0].getBBox().width
澄清一下，$('#testtext')[0] (jQuery()) 和 document.getElementById("testtext") 返回一个 DOM 元素对象，然后在 svg elements 上原生支持 getBBox().width

【解决方案4】：

试试 Element.getBoundingClientRect()。它来自 html DOM，但适用于 SVG 元素（无需太多转换）。

【讨论】：

【解决方案5】：

要确保您的 svg 已添加到 DOM 而不是分离的。还要确保您的 SVG 元素

【讨论】：