Snapsvg - rotate relative to its current position - rotation

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());
});
})();