rotating an svg in mgraphics

Javascript
Venetian's icon

Venetian

hi,

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.

Whilst

rotate(angle)

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!

thanks,
Andrew

do.while's icon

do.while

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 .

poorsvg.zip
zip
Venetian's icon

Venetian

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?

I'm thinking something like

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

but it's not that easy to get right!

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

do.while's icon

do.while

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 .

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