我正在使用snap.svg一个snap.svg.zpd库。如果使用snap.svg和jQuery panzoom库组合,也会遇到相同的问题。
您可以找到here的代码示例。
var mySvg = $("#plan")[0];
var snap = Snap("#plan");
//create an image
var imagePlan = snap.image("http://upload.wikimedia.org/wikipedia/commons/4/42/Cathedral_schematic_plan_fr_vectorial.svg", 10, 10, 900, 500);
var group = snap.group(imagePlan);
snap.zpd();
var pt = mySvg.createSVGPoint(); // create the point;
imagePlan.click(function(evt)
{
console.log(evt);
pt.x = evt.x;
pt.y = evt.y;
console.log(mySvg.getScreenCTM().inverse());
//When click, create a rect
var transformed = pt.matrixTransform(mySvg.getScreenCTM().inverse());
var rect1 = snap.rect(transformed.x, transformed.y, 40, 40);
group.add(rect1);
});
问题是...如果单击初始svg,它将在鼠标位置添加矩形。如果平移/缩放图像,然后添加矩形,它将被剪切。
看来方法mySvg.getScreenCTM()。inverse()中存在问题。返回的矩阵总是相同的,平移和缩放不会更改它。它始终使用来自初始呈现的svg的矩阵。但是,如果我检查svg元素,则可以看到pann / zoom更改变换矩阵直接在元素上(下图)。
有谁知道如何解决这个问题。我的要求是能够在任何缩放比例或平移上下文上将svg外部的元素拖放到svg中,因此我需要从鼠标单击点转换为svg偏移坐标。如果您知道可以执行此操作的任何其他方法或任何其他库组合,那么对我来说没关系。
提前致谢。
最佳答案
问题是,转换不在mySvg中。它在svg内的'g'组元素上。据我所知,Zpd将创建一个要对其进行操作的组,因此您需要研究一下。
要突出显示这一点,请看一看
console.log(mySvg.firstElementChild.getScreenCTM().inverse());
在这种情况下,它是g元素(有更直接的访问方式,取决于您是要使用js,snap还是svg.js)。
jsfiddle
从您的描述中还不清楚,您希望矩形(在svg中,在单独的区域内或在什么区域内)去向何处以及以何种比例缩放,以及是否要使其成为缩放/平移,静态或其他方式的一部分。所以我不确定你是否需要这个。
我猜你想要类似this的东西
var tpt = pt.matrixTransform( mySvg.firstElementChild.getScreenCTM().inverse() )
var rect1 = snap.rect(tpt.x, tpt.y, 40, 40);