title: How to get the width of an svg:g element
body: <p>I am currently working with an <code>svg</code> element in JavaScript. And I am new to this.</p>
  
  <p>My question is that I have an <code>svg</code> element in which I have multiple <code>svg:g</code> elements. And in my <code>svg:g</code> elements I have various other svg elements.</p>
  
  <pre><code>    &lt;svg&gt;
       &lt;g class="my-class"&gt;
        &lt;g class "c1"&gt;
           &lt;text style="font-size: 9" x="0" y="-4"&gt; john &lt;/text&gt;
           &lt;text style="font-size: 9" x="70" y="-4"&gt; 13 &lt;/text&gt;
        &lt;/g&gt; 
        &lt;g class="c2"&gt;
           &lt;text style="font-size: 9" x="0" y="-4"&gt; john &lt;/text&gt;
           &lt;text style="font-size: 9" x="70" y="-4"&gt; 13 &lt;/text&gt;
        &lt;/g&gt; 
        &lt;g class="c3"&gt;
           &lt;text style="font-size: 9" x="0" y="-4"&gt; john &lt;/text&gt;
           &lt;text style="font-size: 9" x="70" y="-4"&gt; 13 &lt;/text&gt;
        &lt;/g&gt; 
      &lt;/g&gt;
     &lt;/svg&gt;
  </code></pre>
  
  <p><code>g</code> are dynamically appending in my </p>
  
  <blockquote>
    <p>g "my_class"</p>
  </blockquote>
  
  <p>Now I want to set my <code>svg</code> width equal to the width of <code>g.my_class</code> width.</p>
  
  <pre><code>var svgWidth  =   $('.my-class').width()
  alert(svgWidth);
  </code></pre>
  
  <p>But its giving me zero. How ever I can see it on my browser in a yellow tool tip box<img src="https://i.stack.imgur.com/A84mi.png" alt="enter image description here"></p>
  
  <p>when I select this line.</p>
  
  <p>Can anyone kindly guide me? Am I doing this right, or how can I achieve this?
  Thanks</p>