rotating an svg in mgraphics


    Jun 28 2015 | 1:49 am
    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

    • Jun 28 2015 | 11:22 am
      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 .
    • Jun 28 2015 | 11:35 am
      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...
    • Jun 28 2015 | 11:41 am
      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