svg.js rotating element rotates whole coordinate system

Question

Using svg.js version 2.1.1

When trying to rotate object and then move it, it looks like the whole coordinate system is rotating, and not only the object. It's like both axes are rotating with the object. This is not desired by me - I would like to use absolute coordinates, not relative to object.

Maybe I don't understand SVG or svg.js and I do something wrong, but it looks ridiculous to me.

Sample code

var draw = SVG('drawing').size(300,300)
var img = 'https://pbs.twimg.com/profile_images/378800000674268962/06ce58cab26c3a0daf80cf57e5acb29b_400x400.jpeg'

var picture = draw.image(img, 100, 100)
picture.rotate(30)
var i = 20

picture.click(function() {    
    this.move(i,0)
    i += 20
})

Here's the fiddle example of what I'm talking about: https://jsfiddle.net/dudek3370/swzqo5ye/8/

Did you find a solution to reset the coordinate axis ? – Sep 20 '18 at 09:47 — , Sep 20 '18 at 09:47

score 2 · Accepted Answer · answered Jan 05 '16 at 18:35

If you want to work with the non-rotated co-ordinate system and rotate something then simply place the rotated item in a container that you don't rotate and then move the container. E.g.

var draw = SVG('drawing').size(300,300)
var img = 'https://pbs.twimg.com/profile_images/378800000674268962/06ce58cab26c3a0daf80cf57e5acb29b_400x400.jpeg'

var group = draw.group();
var picture = group.image(img, 100, 100)
picture.rotate(30)
var i = 20

group.click(function() {    
    this.move(i,0)
    i += 20
})

<div id="drawing"></div>
<script src="https://s3-eu-west-1.amazonaws.com/svgjs/svg.js" type="text/javascript" charset="utf-8"></script>

svg.js rotating element rotates whole coordinate system

1 Answers1