Having trouble animating a grouping in jQuery SVG

Question

I'm new to jQuery as well as jQuery SVG and I can't seem to animate a grouping.

var g = svg.group(); 

var newRectA = svg.rect(g, 100, 10, 25, 25); 
var newRectB = svg.rect(g, 200, 10, 25, 25); 

$(g).animate({ svgX: random(500), svgY: random(500)}, 500);

Is that how you animate a group? Are newRectA and newRectB even grouped together?

Answer 1

newRectA and newRectB are grouped together, yes!

But you cannot animate the x and y coordinates of a group - they can only be animated for rect, text and svg.

Take a look at the reference. It tells you exactly which attributes of which elements can be animated!

You could use the transform attribute of your group instead of svgX and svgY:

$(g).animate({svgTransform: 'translate('+random(500)+', '+random(500)+')'}, 500);

This should do the same!