使用jQuery获取SVG路径的边界框（bounding box）

Question

我想在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 "/>

- SivaRajini

---

也许你可以从这个简单的实用程序中获得灵感，它允许你输入路径，然后显示边界框。http://codepen.io/netsi1964/full/vNoemp/ - Netsi1964

Answer 1

getBBox是一个本地的SVG方法，不是jquery的一部分，因此您需要编写

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

示例

如果您在示例中得到了非零值，但在代码中得到了零值，则一定有其他问题您没有向我们展示。

最可能的原因是路径是<defs>的子元素，即您只是间接在图案或剪辑路径中使用它，或者它具有display样式为none, 在这种情况下它不会被呈现，因此不会有边界框。

- Robert Longson

---

这是一个糟糕的解决方案/响应。我已经知道了并且也尝试过这样做，但它仍然返回零。 - SivaRajini

在这种情况下，它将返回“0”值。我也尝试了矩形元素，但在所有浏览器中都只返回“零”。http://stackoverflow.com/questions/16393361/getbbox-returns-nothing-for-rect-or-path - SivaRajini

如果我使用Firefox点击我上面回答中的“example”链接，我得到的是-2390。你是说使用Firefox并点击链接时你得到了0？ - Robert Longson

如果矩形/路径的样式为display:none或者是<defs>的子元素，则返回0，因为在这两种情况下，矩形/路径实际上并没有被绘制。 - Robert Longson

我想获取组合的SVG路径的矩形或框。请参考以下JSFiddle链接：http://jsfiddle.net/gFJyC/ - SivaRajini

Answer 2

getBBox()在Webkit中的本机实现存在缺陷，您可以在此处找到错误跟踪器。实际上，现在已经修复了。

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

您可以利用Raphael的element.getBBox()，它与本机的getBBox()执行相同的操作。

- nicholaswmin

---

实际上，它在Chrome上无法工作。这里的示例展示了问题以及当前Chrome版本（45）和最新IE/FF之间的差异。 - saguiar

Chrome现在是正确的 - 上面评论中发布的示例不一致是由于笔画宽度的原因。 - nicholaswmin

Answer 3

我也在尝试使用JQuery语法时遇到了困难。这个错误信息显示为：“Uncaught TypeError: Object [object Object] has no method 'getBBox'”。

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

......因为我漏掉了数组索引 (感谢下面的 @Christian Vielma)！

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

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

所以你可以尝试这个。

- MSC

---

我相信你需要使用$('#testtext')[0].getBBox().width。 - Christian Vielma

只是为了澄清，$('#testtext')[0] (jQuery()) 和 document.getElementById("testtext") 都会返回一个 DOM 元素对象，而该元素对象在 svg 元素 上原生支持 getBBox().width。 - Ricardo

Answer 4

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

- yeahdixon

Answer 5

尝试使用Element.getBoundingClientRect()。它来自于HTML DOM，但在SVG元素上对我很有效（不需要太多转换）。

- OsamaBinLogin