How to get getBBox of a path after applying transform

Question

I have this svg block ,this group can drag so the transform matrix changes everytime while i drag

<g id="product_1240" transform="matrix(-0.5032,0.8642,-0.8642,-0.5032,80.0928,78.4287)" class="elements">
<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"></path>
<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"></path>
</g>

i can get the getBBox() of the element product_1240 like this

console.log($('#product_1240')[0].getBBox());

this is working fine ,but if i do

console.log($('#p1')[0].getBBox());

im getting result but its static through out the drag because there is no transform to p1 but only to its parent g.My question is is there anyway to get the getBBox() of element p1 after applying the transform matrix of its parent g

Answer 1

getTransformToElement() may be what you are after.

More usage of getTransformToElement

Once you have the transform, you can apply it to each of the bbox points to get your transformed bbox.