В настоящее время я работаю с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);

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

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

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