svg - 使用 jQuery 获取 SVG 路径的边界框

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 "/>

Answer 1

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

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

例子

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

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

Answer 2

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

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

您可以使用Raphael's element.getBBox()，它与 native 做同样的事情getBBox()。

Answer 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);

所以你可以试试。

Answer 4

要确保的一件事是您的 svg 已添加到 DOM 中并且没有分离。还要确保您的 SVG 元素

Answer 5

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