title: How to get getBBox of a path after applying transform
body: <p>I have this <code>svg</code> block ,this group can drag so the transform matrix changes everytime while i drag</p>
  
  <pre><code>&lt;g id="product_1240" transform="matrix(-0.5032,0.8642,-0.8642,-0.5032,80.0928,78.4287)" class="elements"&gt;
  &lt;path id="p1" d="m -25, -15 l 50,0 l 0,30 l -50,0 z" fill="#fc7f4c" stroke="#FC7F4C" vector-effect="non-scaling-stroke" style="opacity: 0.3;" class="elements" opacity="0.3"&gt;&lt;/path&gt;
  &lt;path id="p2" d="m -20, -10 l 40,0 l 0,20 l -40,0 z" fill="#e5e5e5" stroke="#cccccc" vector-effect="non-scaling-stroke"&gt;&lt;/path&gt;
  &lt;/g&gt;
  </code></pre>
  
  <p>i can get the <code>getBBox()</code> of the element <code>product_1240</code> like this</p>
  
  <pre><code>console.log($('#product_1240')[0].getBBox());
  </code></pre>
  
  <p>this is working fine ,but if i do </p>
  
  <pre><code>console.log($('#p1')[0].getBBox());
  </code></pre>
  
  <p>im getting result but its static through out the drag because there is no transform to <code>p1</code> but only to its parent <code>g</code>.My question is is there anyway to get the <code>getBBox()</code> of element <code>p1</code> after applying the transform matrix of its parent <code>g</code></p>