Venetian

I'm using svg_render to display an svg in a jsui object. I'd likt ot rotate the image, around the centre. Darwin Grosse's tutorial #28 quite a good guide on this to start with.

works fine to rotate and translate can be used to move results around a little, it's tricky to work out the coordinate aorund which the image is rotated and how to translate back exactly so this would be a desired coordinate, such as the centre. At the moment, it's somewhere left and above the top left corner.

Is there any better information on how rotate works with respect to svg images and coordinate systems? Any tips on this appreciated!

works fine to rotate and translate can be used to move results around a little, it's tricky to work out the coordinate aorund which the image is rotated and how to translate back exactly so this would be a desired coordinate, such as the centre. At the moment, it's somewhere left and above the top left corner. 

Is there any better information on how rotate works with respect to svg images and coordinate systems? Any tips on this appreciated! 

rotating-an-svg-in-mgraphics

 around desired pivot you have to know its size's , so you can offset coordinates of its matrix , rotate and get it back .

Hi Andrew !
Well , SVG support in JSUI is rather poor . In order to rotate an SVG around desired pivot you have to know its size's , so you can offset coordinates of its matrix , rotate and get it back .


thanks. so supposing you know width, height and the offset of x and y from the svg (by looking at the xml for instance). how might you do that?

p.s. actually, I've just noticed your example - that looks great! - will investigate...

translate(-x, -y);
rotate(angle);
translate(x,y);

p.s. actually, I've just noticed your example - that looks great! - will investigate...


In order to get svg size from its document , you will have to parse its file in order to search for width / height fields . Its pain in the ass . But possible .

If you use Image for example , you can retrieve its size from given property .

var yourimage = new Image("image.png");
yourimage.size[0] // width
yourimage.size[1] // height



Look at the attached zip file .
In order to get svg size from its document , you will have to parse its file in order to search for width / height fields . Its pain in the ass . But possible .
If you use Image for example , you can retrieve its size from given property . 

rotating an svg in mgraphics