使用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>即你只是在模式或clipPath中间接使用它,或者它的显示样式为none,在这种情况下它不会被渲染,因此没有边界框.

Answer 2

getBBox()Webkit中的本机实现是错误的,您可以在此处找到错误跟踪器.实际上现在已经修好了

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

你可以使用Raphael's element.getBBox(),它和本机一样getBBox().

Answer 3

我也很难让JQuery语法为我工作.返回Uncaught TypeError:Object [object Object]没有方法'getBBox':

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

...因为我省略了数组索引(感谢@Christian Vielma,下面)!

但是标准的Javascript对我有用,我能够在Chrome控制台中显示(在我的情况下)RECT的宽度:

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

所以你可以尝试一下.