如何获得svg：g元素的宽度

我目前正在使用JavaScript中的svg元素。 而我对这个是新的。

我的问题是，我有一个svg元素，我有多个svg:g元素。 在我的svg:g元素中，我还有其他的svg元素。

  <svg> <g class="my-class"> <g class "c1"> <text style="font-size: 9" x="0" y="-4"> john </text> <text style="font-size: 9" x="70" y="-4"> 13 </text> </g> <g class="c2"> <text style="font-size: 9" x="0" y="-4"> john </text> <text style="font-size: 9" x="70" y="-4"> 13 </text> </g> <g class="c3"> <text style="font-size: 9" x="0" y="-4"> john </text> <text style="font-size: 9" x="70" y="-4"> 13 </text> </g> </g> </svg> 

g是dynamic追加在我的

g“my_class”

现在我想设置我的svg宽度等于g.my_class宽度的宽度。

 var svgWidth = $('.my-class').width() alert(svgWidth); 

但它给我零。 我怎么可以在我的浏览器中看到一个黄色的工具提示框

当我select这一行。

任何人都可以引导我？ 我做对了吗，或者我怎么做到这一点？ 谢谢

Answer 1

尝试.getBoundingClientRect

 $('.my-class')[0].getBoundingClientRect().width; 

演示http://jsfiddle.net/5DA45/

Answer 2

我build议getBBox （这是SVG 1.1的一部分）通过getBoundingClientRect （不是）：

 $('.my-class')[0].getBBox().width; 

演示http://jsfiddle.net/TAck4/