如何获取 svg:g 元素的宽度

我目前正在与一个svgJavaScript 中的元素。我对此很陌生。

我的问题是我有一个svg我有多个元素svg:g元素。而在我的svg:gelements 我有各种其他 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动态附加在我的

g“我的班级”

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

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

But its giving me zero. How ever I can see it on my browser in a yellow tool tip box

当我选择这一行时。

有人可以指导我吗？我这样做对吗？或者我怎样才能实现这一目标？ 谢谢

Try .getBoundingClientRect

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

Demo http://jsfiddle.net/5DA45/ http://jsfiddle.net/5DA45/