Multiple transforms in same animation on snap.svg

Question

I have the following code :

$(document).ready(function () {

    var stage = Snap("#stage");
    var shape = stage.rect(0, 0, 100, 100, 11, 11);
    var d = 45;

    shape.attr({
        fill: "#bada55",
        stroke: "#000",
        strokeWidth: 6
    });

    function rotation(d) {
        shape.animate({
                transform: 'r' + d + ',50,50'
            },
            1000,
            mina.bounce,
            function () {
                d += 45;
                if (d > 360) d = 0;
                rotation(d);
            }
        );
    }

    rotation(d);
});

I want to perform a translation on the same object within its rotation so that the easing of both the rotation and the translation is synchronized.

How do I do that?

{ transform: 'r' + d + ',50,50' , 't50,50'},

doesn't work.

Any idea?

Answer 1

transform: r45,50,50 t50,50

I.e., space-separate them.