How to get width of svg:g element
===

I am currently working with svg element of JavaScript.And I am new to it

My question is that I have an svg element in which I multiple svg:g  element.and in my svg:g I have various other svg elements.

        <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> are dynamically appending in my <g "my_class">
Now I want to set my svg width egual to the width of <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.![enter image description here][1]

when I select this line.

Can any one kindly guide me am I doing this right or how can I achieve this
Thanks


  [1]: http://i.stack.imgur.com/A84mi.png