2017-03-28 30 views
2

我學會了使用snap svg這個庫並且想要旋轉一個對象。但是,我得到了一個奇怪的旋轉效果,無法找到問題所在。試圖旋轉中心點但不工作的對象

以下是代碼片段,你可以看看它。

var s = Snap("#container"); 
 

 
//lets draw 2 rects at position 100,100 and then reposition them 
 

 
var r = s.rect(100,100,100,100).attr({fill: 'red' }); 
 

 
var g = s.group(r); 
 

 
var bbox = g.getBBox(); 
 

 

 
s.text(20, 20, bbox.cx); 
 

 
s.text(20, 40, bbox.cy); 
 

 
g.animate({ transform: 'r180,'+ bbox.cx + ',' + bbox.cy }, 1000, mina.bounce);
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js"></script> 
 
</head> 
 
<body> 
 
    
 
    <div style="width: 335px; height: 600px;"> 
 
    
 
    
 
    <svg width='100%' height='100%' id='container'></svg> 
 
    
 
    </div> 
 
    
 
    </body> 
 
</html>

希望有人能告訴我:)

回答

3

我覺得有一個在管理單元中的錯誤0.5/0.5.1看到here

我會做的第一件事就是嘗試Snap 0.4.1例如here,看看是否修復它。我認爲它是固定的0.5.2,但不確定是否可用。

如果它沒有解決它,更新問題提及你也嘗試0.4.1。

+0

是的......這是一個0.5的錯誤。我嘗試使用snap 0.4.1的代碼片段,它工作,哈哈。謝謝! – jing