Atualmente estou trabalhando com umsvg elemento em JavaScript. E eu sou novo nisso.

Minha pergunta é que eu tenho umsvg elemento em que tenho múltiplossvg:g elementos. E no meusvg:g elementos eu tenho vários outros elementos 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 são dinamicamente anexando no meu

g "my_class"

Agora quero definir meusvg largura igual à largura dog.my_class largura.

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

Mas está me dando zero. Como eu posso ver isso no meu navegador em uma caixa de dica amarela

quando eu seleciono esta linha.

Alguém pode gentilmente me guiar? Estou fazendo isso certo ou como posso conseguir isso? obrigado