svg.js旋转元素旋转整个坐标系

Question

使用 svg.js 版本 2.1.1

当尝试旋转对象然后移动它时，看起来整个坐标系都在旋转，而不仅仅是对象。就像两个轴都随物体旋转一样。这不是我想要的——我想使用绝对坐标，而不是相对于对象。

也许我不了解 SVG 或 svg.js 并且我做错了一些事情，但我觉得这很可笑。

示例代码

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
})

这是我所说的 fiddle 示例：https://jsfiddle.net/dudek3370/swzqo5ye/8/

Answer 1

如果您想使用 non-rotated co-ordinate 系统并旋转某些东西，只需将旋转的物品放入您不旋转的容器中，然后移动容器即可。例如

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旋转元素旋转整个坐标系

svg.js rotating element rotates whole coordinate system

svg

rotation

svg.js