Question

If I were animating an individual element with raphael.js to a specific location, then I could use the following code that sets the elements x attribute:

elem.animate({x: specific_X_Location}, 1000);

but I have found no way to move a set to a specific location.

There are two SO articles:
accessing a set inside a set in raphael js, and
How is set animation done in Raphael?
that discuss how to translate a set a given distance (i.e. move the set right by 100, or up by 100) which use transformation or translation, e.g.

var mySet = paper.set();
mySet.push(...add elements to set);
mySet.animate({transform: "t100,0"}, 1000); // move my set right by 100

but there doesn’t seem to be a way to move the whole set to a specific location.

Looking at things in firebug, I guess a set is just an array in the end, which is why is doesn’t have x or y attributes.

Is it possible to access any information about the elements of the set without addressing them individually?

In order to transform a set to a specific location, do you think I will have to work out the transformation for a specific element and then apply that movement to the whole set? Or is there a better way that I’ve missed?

Thanks a lot

Answer 1

You are right that the set is just an array.
And sadly there is no easy way to move a whole set – at least from what I have gathered.
I have been facing this same problem in a project ive been working on, well… all night.
It would seem that the set is most useful to apply attributes etc to a large group of objects. Say if you want a hundred red circles on the screen set is your guy.
But if you attempt to apply the transform to the set it will work the same way as apply attributes – its global to the set. This means all your circles will go to the same coordinates and scale etc. rather than just one.
A work around I have been using is to use exclude and getById – like this :

 yourSet.exclude(paper.getById('2'));

Once you have excluded your object from the set you can then apply the transform to the singular object like this.

 paper.getById('2').transform('t230,265s3');

Then you just repeat for each object you wish to move.

As you can imagine this is incredibly tedious for large sets and you may as well just use the singular var syntax (unless you’re applying attributes to a group of objects).

I’m wondering if there is a way to use array syntax and math to do this for you, but then you’ve got to figure out all the relationships between the objects.

Or perhaps we’ll see if a newer release of Raphael will contain some sort of easy set-transform. That would be genius.