svg - 如何使用 snap.svg 获取 svg 对象的旋转值？

Question

所以，我正在使用 snap.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 旋转对象？

Answer 1

理想情况下，您将自己控制旋转(而不是从可能的属性中找出它，但更麻烦)。动画可以更容易，具体取决于您的需要。这是一个示例，显示了一些带有 rect 的基本动画(因为如果围绕中心，圆形旋转就是它本身)...

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/ 上 fiddle

实际上，最好对 SVG 的转换(以及平移、旋转、缩放)有一个基本的了解，只是为了让它更有意义。你可以用 myRect.attr('transform') '看到'结果变换，但我可能一开始就离开它。