如何使用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");

我需要帮助的是:

1. 是否有某种旋转属性可用于旋转此对象？
2. 如果没有,我如何使用snap.svg旋转对象？

Answer 1

使用Snap.Matrix()更好地旋转对象

Ian建议的方式对我来说非常适合我使用Chrome版本<36.0当我将Chrome更新为36.0.1985.125时,我看到了文本轮换的错误.

所以,洗液正在使用

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

也许它会对某些人有用.

Answer 2

理想情况下,您将自己控制旋转,(而不是从可能的属性中找出它,但是更加狡猾).根据您的需要,动画可以更容易.这是一个显示一些带矩形的基本动画的例子(如果围绕中心,圆圈旋转本身就是这样)......

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')'看到'结果转换,但我可能会在开始时离开它.