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

前端之家收集整理的这篇文章主要介绍了使用jQuery获取SVG路径的边界框前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想在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 "/>

解决方法

getBBox是一个原生的SVG方法,不是jquery的一部分,所以你需要编写
$("#"+ path id)[0].getBBox()

example

如果你为这个例子得到一个非零值而你的代码中的值为零,那么肯定还有其他一些你没有向我们展示过的东西.

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

猜你在找的jQuery相关文章