Transform image in svg without transforming coordinate system

Question

I am new to svg. I have an image that I want to rotate. I have rotated the image using rotation transform and giving it an angle and coordinates of the point around which I want to rotate the image.

My requirement is when I drag the Image after rotation, I want to check that top-left corner is within bounding area. This works before rotate. But after rotation, it seems that after applying this transform to the Image, my coordinate system is also rotated in the same angle. This is causing some problem for me.

Is there any way to rotate the image without rotating the original coordinate system? Also x and y attribute of image is not getting updated if I rotate image .

Paul LeBeau Paul LeBeau · Accepted Answer · 2014-12-16T14:25:31

If you put the rotated image inside a <g> element and get the bounding box of that (ie. my_group.getBBox()) it will contain the dimensions of the rotated image.

Example SVG (I've used a rect here, but it will work the same for an 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

Transform image in svg without transforming coordinate system

1 Answers