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()

example

如果您为示例获取非零值并在代码中获得零值，那么必须还有其他内容，而您尚未向我们展示。

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

Answer 2

~~Webkit中的getBBox()本机实现有问题，您可以找到bug tracker here~~ 。实际上它已经固定了

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

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

Answer 3

我也很难让JQuery语法为我工作。返回未捕获的TypeError：对象[object Object]没有方法'getBBox'：

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

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

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

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

所以你可以试试。

Answer 4

尝试使用Element.getBoundingClientRect（）。它来自html DOM，但对我来说适用于SVG元素（无需太多转换）。

Answer 5

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

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

5 个答案: