CODEWITHSUNDEEP
svgrotationsvg.js
Kevros
Kevros

Reputation: 23

svg.js rotating element rotates whole coordinate system

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/

Upvotes: 2

Views: 1284

Answers (1)

Robert Longson
Robert Longson

Reputation: 124029

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>

Upvotes: 2

Related Questions