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

這裏的小提琴例子是什麼我談論：https://jsfiddle.net/dudek3370/swzqo5ye/8/

Answer 1

如果你想與非旋轉座標系工作和旋轉的東西，然後只需將旋轉的容器中的項目不會旋轉，然後移動容器。例如。

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>