如何通過snap.svg獲得svg對象的旋轉值？

所以，我使用snap.svg，我想隨着時間的推移動態旋轉一個對象。事情是這樣的：如何通過snap.svg獲得svg對象的旋轉值？

function rotateObject() 
{ 
    myObject.rotation += value; 
}

的問題是我不知道如何訪問旋轉值，我的顯示對象（或如果他們甚至存在！）所以，有了簡單的東西，比方說，一個圈子聲明如下：

snap = Snap(800,600); 
circle = snap.circle(400,300,50);

我知道我可以訪問x和y的值，像這樣：

circle.attr("cx"); 
circle.attr("cy");

我需要幫助的是：

是否有我可以用來旋轉此對象的某種旋轉屬性？
如果不是，我該如何使用snap.svg旋轉對象？

來源

2013-11-21 onekidney

理想情況下，您將自己控制旋轉（而不是從可能的屬性中找出它，但是很快）。動畫可以更容易，取決於你需要什麼。這裏是表示一個矩形，一些基本的動畫的例子（如圓形旋轉只是本身如果圍繞中心）...

s = Snap(400, 620); 

var myRect = s.rect(100, 100, 100, 200).attr({ 
    fill : 'white', 
    stroke : 'black' 
}); 
var myRotate = 45; 

// if you wanted to rotate manually using your own adjust variable then this 
// myRect.transform("r" + myRotate); 
// but simpler in most cases to use the animate method 


myRect.animate({ transform: "r" + myRotate + ",150,200" }, 1000); //rotate around centre of 150,200

小提琴在http://jsfiddle.net/XG7ks/6/

實際上它很可能是最好獲得一個基本的基於SVG的變換（以及翻譯，旋轉，縮放）只是爲了讓它更有意義。你可以使用myRect.attr（'transform'）'看到'結果轉換，但是我可能剛開始時會留下。使用Snap.Matrix()

通過Ian建議的方式

來源

2013-11-21 22:56:16 Ian

好吧，這很有意義，並給我一個方向進去。非常感謝！ – onekidney

更好的旋轉對象，對我的作品完美，而我使用的Chrome版本< 36.0 當我更新了Chrome瀏覽器36.0.1985.125我看到文字旋轉錯誤。

所以，soulution用

var matrix = new Snap.Matrix(); 
matrix.rotate(-90, x, y);  
Paper.text(x, y, 'Text').attr({ 
        fontWeight: 'bold', 
        fill: '#434343', 
        transform: matrix 
       });

代替

Paper.text(x, y, 'Text').attr({ 
        fontWeight: 'bold', 
        fill: '#434343', 
        transform: 'r-90' 
       });

也許這將是有用的人。

來源

2014-07-17 12:09:26 Stafox

如何通過snap.svg獲得svg對象的旋轉值？

回答

相關問題