Geek Answers Handbook

How do you get the rotation value of an svg object using snap.svg?

So, I am using snap.svg, and I would like to dynamically rotate the object over time. Something like that:

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

The problem is that I don’t know how to access the rotation values ​​for my display objects (or if they even exist!). Therefore, given something simple, suppose a circle is declared as follows:

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

I know that I can access the x and y values ​​as follows:

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

I need help:

  • Is there any rotation property that can be used to rotate this object?
  • If not, how do I rotate an object using snap.svg?
+4
source share
2 answers

( , , fiddlier). , , . , ( , )...

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 "), , , .

+5

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

, -.

+6

More articles:


All Articles