Free Transform plugin for SVG - creating placeholder element

Question

I'm trying to create html5 collage editor, where you can edit images in similar way to one you see in Word (cropping images instead of scaling them when dragging edges, being able to drag/rotate/scale images inside free transform area (so sort of placeholder funcionality), etc.). It means we need using SVG and clipping/masking, and binding position of free transform elements to those masks/clippings. Whole generated SVG should later be scalable for print dimensions (but that is not the issue here).

The idea is simple -

1. use already made jQuery Free Transform plugin - https://github.com/gthmb/jquery-free-transform
2. bind it's controlls area transformation to SVG masks

The issue: Even if transformed SVG mask has exact copy of transformation and position of FT div, it acts weird when transformation contains rotation. Seems like transform - origin does not work, rotating and scaling somehow is connected to left-upper corner instead of center, don't know why:/

Here is a fiddle, just try to rotate element and you will see what is the problem:

Fiddle (simplifed code with already made svg)

Main js part :

var refreshSVGMask = function(){

//get element transform
var elTransform = $('#ft').css("transform");

//quick parse of matrix transform:
var elMatrix = elTransform.substring(elTransform.indexOf("matrix") + 7, elTransform.indexOf(")"));

//modify matrix, to apply last two values (top and left position), which in jquery free transform are in "top" and "left" css attributes. Note - I've also tried applying same matrix, but changing "x" and "y" attributes in SVG (like: .attr("x", elTop)) -> got exactly same results. 
var elTop = parseInt($("#ft").position().top);
var elLeft = parseInt($("#ft").position().left);
var matrixChanged = elMatrix.substring(0, elMatrix.length-6) + ", " + elLeft + ", " + elTop;

//apply matrix to SVG element:
$("#SvgjsRect1008").attr("transform", "matrix("+matrixChanged+")")
.attr("transform-origin", "50%,50%"); // also - put transform origin, but it does not seem to work

};

Does anybody know how to fix this? I'm starting to loose my mind on this :(

EDIT 1 (08/10/2014)

Following advice given in comment by Phorgz, I've recreated SVG with SVGJS library (in order to add transformation separately instead of copy whole Matrix ), and before applying rotation I've repositioned it to it's orgin, and then restore it's proper position.

Fiddle

As you can see it's little bit better (rotated mask is somehow closer to FT positions), but still - it's not in proper place:/

Answer 1

I had to develop similar application to yours and I have found that this library solves most of the problems with manipulating objects on canvas like raster images, svg, shapes, text etc... includes drag'n'drop, rotating, scaling, layering etc...

http://fabricjs.com/

Hope it helps!