使用jQuery获取SVG路径的边界框 [英] Get bounding box for SVG path using jQuery

问题描述

我想在jquery中获取svg路径的getBBox().我尝试过这样

I want to get the getBBox() for svg path in jquery. i tried like this

$("#"+ path id)[0].getBBox() -> returns x=0,y=0,width=0,height=0

我已将路径添加到SVG元素.我尝试了SVG中的其他元素，例如文本节点，在这种情况下它返回了一些边界框值.

I have added the path to an SVG element. I tried some other element in SVG, for example text node in that case it returns the some bounding box value.

如何计算SVG中路径的边界框?

How can I calculate the bounding box for a path in 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的一部分，因此您需要编写

getBBox is a native SVG method and isn't part of jquery so you would need to write

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

示例

如果示例中的值非零且代码中的值为零，那么肯定还有其他事情没有显示给我们.

If you're getting a non-zero value for the example and a zero value in your code then there must be something else going on that you've not shown us.

最可能的原因是该路径是<defs>的子代，即，您仅在pattern或clipPath中间接使用它，或者该路径的显示样式为none，在这种情况下将不会呈现该路径这样就没有边界框.

The most likely causes are that the path is a child of <defs> i.e. you're only using it indirectly in a pattern or clipPath or alternatively the it has a display style of none in which case it wouldn't be rendered so would have no bounding box.

这篇关于使用jQuery获取SVG路径的边界框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！