Как получить ширину элемента svg: g

В настоящее время я работаю с элементом svg в JavaScript. И я новичок в этом.

Мой вопрос в том, что у меня есть элемент 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 динамически добавляются в моем

g "my_class"

Теперь я хочу установить ширину svg равной ширине g.my_class.

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

Но это дает мне ноль. Как бы я ни видел это в своем браузере в желтом ящике для инструментов

когда я выбираю эту строку.

Может ли кто-нибудь любезно вести меня? Правильно ли я это делаю, или как я могу это достичь? Благодаря