Бесплатный плагин Transform для SVG - создание элемента-заполнителя

Я пытаюсь создать редактор коллажей html5, где вы можете редактировать изображения аналогично тому, как вы видите в Word (обрезка изображений вместо их масштабирования при перетаскивании ребер, возможность перетаскивания/поворота/масштабирования изображений внутри свободного преобразования область (например, функция местоположения) и т.д.). Это означает, что нам нужно использовать SVG и обрезку/маскировку, а также привязывать позиции элементов свободного преобразования к этим маскам/вырезкам. Все созданные SVG впоследствии должны быть масштабируемыми для размеров печати (но это не проблема).

Идея проста -

использование уже сделанного jQuery Free Transform plugin - https://github.com/gthmb/jquery-free-transform
привязать его к управлению преобразование области в маски SVG.

Проблема: Даже если преобразованная маска SVG имеет точную копию преобразования и положение FT div, она действует странно, когда преобразование содержит вращение. Кажется, что преобразование - происхождение не работает, поворот и масштабирование каким-то образом связаны с левым верхним углом вместо центра, не знаю, почему:/

Вот скрипка, просто попробуйте повернуть элемент, и вы увидите, в чем проблема:

Fiddle (упрощенный код с уже сделанным svg)

Основная часть js:

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

};

Кто-нибудь знает, как это исправить? Я начинаю раздумывать над этим: (

EDIT 1 (08/10/2014)

Следуя советам, приведенным в комментарии Phorgz, я воссоздал SVG с библиотекой SVGJS (чтобы добавить преобразование отдельно, а не копировать целую матрицу), и перед применением вращения я переместил его на него orgin, а затем восстановил его правильное положение.

Fiddle

Как вы можете видеть это немного лучше (повернутая маска как-то ближе к позициям FT), но все же - это не в нужном месте:/

EDIT 1 (08/10/2014)

Ответ 1