Javascript 将浏览器单击事件“x”和“y”坐标转换为缩放捕捉svg元素上的坐标

我需要在用户单击的位置向snap呈现的svg添加一段文本

因为SVG是使用100%宽度缩放的，并且使用了

viewBox

属性，所以我需要将浏览器单击事件提供的

x

和

y

坐标转换为缩放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);
});

现在，我明白了为什么我需要减去偏移量。我不明白的是，

snap.transform（）.diffMatrix.invert（）

实际上做了什么

---

有人能告诉我为什么这样做吗？我无法从snap文档中获得太多信息，总体来说，它似乎非常稀疏。

我猜在这种情况下，您可以将diffMatrix替换为globalMatrix，它仍然可以工作吗

Snap在响应transform（）方法时存储3个矩阵。localMatrix、diffMatrix和globalMatrix

localMatrix是元素本身上存在的变换

globalMatrix是从视口到要应用的元素的矩阵

diffMatrix是它们之间的差异

对于globalMatrix，当它传递到本机方法时，可能值得一看。 对于localMatrix，请查看元素本身上的任何转换（svg元素本身上可能没有转换，因为它不支持转换）

因此，当您查看浏览器时，视图可能会被放大、平移等，并有一个viewBox。鼠标的坐标需要从该坐标空间转换为元素所在的坐标空间。这就是globalMatrix的逆矩阵将要做的，从鼠标进行转换。因此，我假设diffMatrix和globalMatrix（getCTM）在本例中的含义可能相同（因为它是一个svg元素，没有应用任何转换）

如果这真的没有意义，那么值得多看一看svg坐标空间教程，因为它非常有用

Edit: I'm adding a bit more info to try and help below...

我已经完成了，有一个例子使用了与OP类似的代码

类似但响应迅速，查看控制台日志以查看矩阵比例的变化

SVG基本上按4缩放，因此放大了以下内容

    height="800" width="800" viewBox="0 0 200 200"

或

25,25处有一个圆圈，单击小提琴中的圆圈

鼠标事件在用户/浏览器事件空间中将是大约100100（有一些偏移要考虑，所以可能取决于108108左右）。< /P> 因此，对于4的刻度，我们需要将100100转换为该刻度，否则它将显示在屏幕外

如果我们将在svg上显示的所有内容都将缩放4，我们只需要使用值的1/4在正确的坐标处显示可能是一种有用的简化方式

我们怎么做？我们反转比例（或任何变换）。我们真正想要的是0.25的比例，将100100转换为25,25，使其显示在屏幕上的正确位置，因为所有内容都被放大（因为svg参数将所有内容缩放4）

是的，localMatrix对svg元素本身没有多大意义（但也不是问题）。如果它是一个带有变换的组或其他元素，那么它是有意义的

---

另外值得注意的是，Snap将参数x，y传递到mousedown func中，因此您可能可以使用它，而不是event.pageX/pageY。

谢谢您的回答

globalMatrix

和

diffMatrix

实际上是相同的，这是因为

localMatrix

在SVG根元素上实际上没有任何作用吗？为什么计算x和y时必须倒过来呢？我已经尝试添加了更多的信息和JSFIDLE，看看它是否有用。谢谢你的清晰解释！我会记下你的答案

    height="100%" width="100%" viewBox="0 0 200 200"