svg.js rotating element rotates whole coordinate system - svg

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/

Answer 1

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>