javascript - Transform image in svg without transforming coordinate system -

i new svg. have image want rotate. have rotated image using rotation transform , giving angle , coordinates of point around want rotate image.

my requirement when drag image after rotation, want check top-left corner within bounding area. works before rotate. after rotation, seems after applying transform image, coordinate system rotated in same angle. causing problem me.

is there way rotate image without rotating original coordinate system? x , y attribute of image not getting updated if rotate image .

if put rotated image inside <g> element , bounding box of (ie. my_group.getbbox()) contain dimensions of rotated image.

example svg (i've used rect here, work same image):

<svg with="200" height="200">     <g id="my_group">         <rect id="my_rect" x="50" y="50" width="100" height="100"               transform="rotate(45 100 100)"/>     </g> </svg> 

js:

var rect=document.getelementbyid("my_rect"); console.log("rect=",my_rect.getbbox()); // prints {x: 50, y: 50, width: 100, height: 100}  var group=document.getelementbyid("my_group"); console.log("group=",my_group.getbbox()); // prints {x: 29.28932, y: 29.28932, width: 141.42135, height: 141.42135 } 

demo here