FireFox 上的 SVG getScreenCTM()

如何解决FireFox 上的 SVG getScreenCTM()

目标

我正在尝试在 SVG 中构建签名板。您可以查看 Sample project here。

说明到目前为止，它可以根据需要在 Chrome、Edge 和 Opera 中运行，但在 Firefox 中，getScreenCTM() 不考虑比例。

研究

我浏览了 bugzilla 的一堆文档和 SO 中的几篇帖子，例如 SVG: GetScreenCTM() for nested SVG is different in Firefox，但仍然不知道如何解决我的问题。

问题

我添加了一个浏览检查来仅处理 Firefox（因为所有其他浏览器都提供了所需的结果），这允许我添加额外的代码来解决问题，但到目前为止，没有成功。 (SPSignature:416)

重现错误

要重现错误，请在 FireFox 中打开示例链接，然后调整框的大小，使其至少比全屏小 20%。您将看到鼠标 X/Y 位置随着比例的变化而变化。

我尝试从 group 标签中获取矩阵变换，但是它从 SVG 返回了类似的结果。如何计算 CTM，使其结果与 Chrome 相似/相等？

代码

源代码 here SPSignature:416

 _getCursorPoint(event)
{
    const svg = document.querySelector('.spsignature svg');
    let pt = svg.createSVGPoint();

    pt.x = event.clientX;
    pt.y = event.clientY;

    // firefox workaround:
    if (this._checkbrowser() === 'Firefox') {
        const matrix = this._decomposeMatrix(svg.getScreenCTM());

        let cood = { 
            x: event.layerX,y: event.layerY
        };

        if (matrix.scaleX < 0.9 || matrix.scaleY < 0.9) {
            console.log('%c @todo: fix mouse position for FF on getScreenCTM().','background:#c00;color:#fff;padding:3px;');
        }

        return cood;
    }

    return pt.matrixTransform(svg.getScreenCTM().inverse());
}

解决方法

为了在 FF 上“修复”鼠标 XY 问题，我使用了根比例值来计算光标 XY 位置。

可以从基于 https://gist.github.com/2052247 的矩阵中检索比例。

此外，在 FF 中，我使用 event.layerX 和 event.layerY 而不是 event.clientX 和 event.clientY 作为初始鼠标坐标值。

因此，我没有使用 matrixTransform(svg.getScreenCTM().inverse()) 来返回相对于 SVG 的计算出的 XY，而是使用了 scale 和 layerXY 来计算正确的 XY 位置。