我需要在用户点击的位置为snap渲染的svg添加一段文字。
由于SVG使用100％宽度进行缩放并使用viewBox属性，因此我需要将浏览器点击事件提供的x和y坐标转换为{{1}缩放svg上的}和x坐标。
我设法通过使用这段代码来完成这项工作：
y现在，我理解为什么我需要减去偏移量。我不明白的是var $canvas = $('svg#myscaledsvg');
var snap = new Snap($canvas[0]);
snap.mousedown(function(event) {
var offset = $canvas.offset();
var matrix = snap.transform().diffMatrix.invert();
var x = matrix.x(event.pageX - offset.left, event.pageY - offset.top);
var y = matrix.y(event.pageX - offset.left, event.pageY - offset.top)
// below function call actually renders the text element to the given x and y coords
addSomeText(x, y);
});
实际上做了什么。
有人可以告诉我为什么这有效吗？我从快照文档中得不到多少，整体看起来相当稀疏。
答案 0 :(得分：1)
我猜这种情况下，您可以将diffMatrix交换为globalMatrix，它仍然有用吗？
Snap存储3个矩阵以响应transform（）方法。 localMatrix，diffMatrix和globalMatrix。
localMatrix 是元素本身存在的转换
globalMatrix 是从viewPort到正在应用的元素的矩阵
diffMatrix 是它们之间的区别。
对于globalMatrix，当它传递给这个本机方法时，可能值得查看getCTM。 对于localMatrix，请查看元素本身的任何变换（可能没有svg元素本身，因为它不支持变换）。
因此，当您查看浏览器时，视图可能会被放大，平移等，并且有一个viewBox。需要将鼠标的坐标从此坐标空间转换为元素所在的坐标。这就是globalMatrix的反转，从鼠标转换。所以我假设diffMatrix和globalMatrix（getCTM）在这种情况下可能意味着相同（因为它是一个没有应用变换的svg元素）。
如果这不是真的有意义，可能值得做一些额外的svg坐标空间教程，因为它可能非常有帮助。
code = code.replaceFirst("width: ?(.*)%", "width: 400%");
jsfiddle我已经完成了，有一个使用与OP相似的代码的示例。
jsfiddle 2类似但反应灵敏，请在控制台日志中查看矩阵比例变化
SVG基本上按4缩放，因此放大了以下内容......
Edit: I'm adding a bit more info to try and help below...
或
height="800" width="800" viewBox="0 0 200 200"
在25,25处有一个圆圈，点击小提琴中的圆圈。
鼠标事件将在用户/浏览器事件空间中围绕大约100,100（有一些偏移需要考虑，因此可能有108,108左右）。
因此，如果比例为4，我们需要转换100,100来计算该比例，否则它将出现在屏幕上。
如果我们将在svg上显示的所有内容都将被缩放4，我们只需要使用1/4的值来显示正确的坐标可能是一种有用的简单方式它
我们如何做到这一点？我们反转比例（或任何变换）。我们真正想要的是0.25的比例，将100,100转换为25,25，因此它出现在屏幕上的正确位置，因为所有内容都被放大（因为所有内容都会被svg参数缩放4）。
是的，localMatrix对svg元素本身并没有多大意义（但它也不是问题）。如果它是一个对它或其他元素进行转换的组，那将是有意义的。
还值得注意的是Snap将参数x，y传递给mousedown func，所以你可以使用它，而不是event.pageX / pageY。