Javascript SVG的免费转换插件-创建占位符元素

我正在尝试创建html5拼贴编辑器，在这里你可以像在Word中看到的那样编辑图像（拖动边缘时裁剪图像而不是缩放图像，能够在自由变换区域内拖动/旋转/缩放图像（类似于占位符功能），等等）。这意味着我们需要使用SVG和剪切/屏蔽，以及将自由变换元素的位置绑定到这些屏蔽/剪切。 整个生成的SVG稍后应该可以针对打印维度进行扩展（但这不是这里的问题）

想法很简单-

使用已经制作的jQuery免费转换插件-

绑定它的控件 SVG掩模的面积变换

问题是： 即使变换后的SVG掩码具有变换的精确副本和FT div的位置，但当变换包含旋转时，它的行为会很奇怪。 似乎变换-原点不起作用，旋转和缩放以某种方式连接到左上角而不是中心，不知道为什么：/

这里有一把小提琴，只要试着旋转元素，您就会看到问题所在：

（使用已生成的svg简化代码）

主要部分：

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

})

有人知道怎么解决这个问题吗？我开始对这件事心不在焉了：(

编辑1（08/10/2014） 按照Phorgz在评论中给出的建议，我用SVGJS库重新创建了SVG（以便单独添加转换，而不是复制整个矩阵），在应用旋转之前，我已将其重新定位到其原点，然后恢复其正确位置

---

正如您所看到的，它稍微好一点（旋转遮罩在某种程度上更接近FT位置），但仍然-它不在合适的位置：/

我不得不开发与您类似的应用程序，我发现该库解决了在画布上操作对象（如光栅图像、svg、形状、文本等）的大多数问题，包括拖放、旋转、缩放、分层等

---

希望有帮助！

您的小提琴在Safari中不起作用：

[Error]TypeError:null不是对象（计算'elTransform.substring'）；refreshSVGMask（显示，第72行）；（匿名函数）（显示，第91行）…

。在不分析代码的情况下，我建议您需要进行“负”平移，将旋转中心置于原点，然后旋转，然后平移回所需位置。下面是使用HTML5画布变换的类似示例（但原理相同）：请参阅此处的讨论：您听说过吗？选择SVG元素并更改属性（“变换”、“平移（250，0）旋转（45）”）应该很容易。快速简单！