Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

svg

snap.svg

So, I'm using snap.svg and I'd like to dynamically rotate an object over time. Something like this:

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

The problem is I don't know how to access the rotation values for my display objects (or if they even exist!) So given something simple, let's say a circle declared like this:

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

I know I can access the x and y values like so:

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

What I need help with is:

  1. Is there a rotation property of some sort that I can use to rotate this object?
  2. If not, how do I rotate an object with snap.svg?
like image 547
Paul Mignard Avatar asked Dec 20 '22 21:12

Paul Mignard


1 Answers

Better rotate objects using Snap.Matrix()

The way suggested by Ian, works for me perfectly while I used Chrome version < 36.0 When I updated Chrome to 36.0.1985.125 I saw bug with text rotation.

So, the soulution was using

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

instead of

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

Maybe it will be useful for somebody.

like image 97
Stafox Avatar answered May 16 '23 09:05

Stafox