如何通过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对象的旋转值？

回答

相关问题