Snapsvg - rotate relative to its current position

Question

I'm having trouble getting an element to rotate relative to its position after being dragged.

I have a slider which goes from 0-360 and when the value is changed the following is called:

var origTransform = activeElement.transform().local
if( origTransform ) {
    var rSplit = origTransform.split('r');
    if( rSplit.length !== 0 ) {
        origTransform = rSplit[0] + "r" + degrease + ",20,20"
    }
} else {
    origTransform = "r" + degrease + ",20,20"
}
activeElement.attr({
    transform: origTransform
});

Anyone see where I'm going wrong?

Answer 1

thanks to @ian for getting me there:

http://jsfiddle.net/4eL3gstp/17/

(function(){
    var canvas = Snap( '#svg' );
    var text = null;
    var setRotation = function(degrease){

        var data = text.data('origionalData');
        var matrix = new Snap.Matrix(1,0,0,1,data.dx,data.dy);
        matrix.rotate(degrease,0,0);

        text.attr({
            transform: matrix,
        });

    };
    canvas.attr({ width : 200, height : 200 });
    text = canvas.text(100,100, 'texttext' ).attr({
        'text-anchor' : 'middle',
        'font-size' : 50,
        transform: 't50,50'
    }); 

    text.drag();
    text.data('origionalData', text.transform().localMatrix.split());
    text.attr({
        transform : 't' + text.data('origionalData').dx + ',' + text.data('origionalData').dy,
        x : 0,
        y : 0
    });

    eve.on("snap.drag.end", function () {
        text.data('origionalData', text.transform().localMatrix.split());
    });    

    var interval = null;
    $('#textRotate').bind( 'mousedown', function(){
        var slider = $(this);
        interval = setInterval(function(){
            setRotation(slider.val());
        }, 50);
    }).bind( 'mouseup.builder', function(){

        clearInterval(interval);
    })
    .bind( 'change', function(){
        setRotation($(this).val());
    });
})();