FireFox 上的 SVG getScreenCTM()答案

【问题标题】：SVG getScreenCTM() on FireFoxFireFox 上的 SVG getScreenCTM()
【发布时间】：2021-08-05 12:52:04
【问题描述】：

目标

我正在尝试在 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 位置随着比例的变化而变化。

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

代码

源代码hereSPSignature: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());
}

【问题讨论】：

您链接到的另一个问题不应该在这里适用，因为您似乎没有使用嵌套的 <svg> 元素。坦率地说，任何人都很难帮助你，因为你没有提供任何示例代码。请提供一个 minimal reproducible example 来说明您如何使用 getScreenCTM() 并且它在 Firefox 中产生了不好的结果。
@Paul LeBeau 我已经提供了项目示例。就代码而言，它可以出现在项目的示例源代码中（1dollar-shop.com/canvas/SPSignature.js）
Stack Overflow 有一个规则要求您提供minimal reproducible example 是有原因的。这里的大多数人没有时间浏览大型代码文件，为您调试它。您可以通过让他们更容易看到问题来增加您的机会。
@Robert Longson - 我已尝试按照建议进行更改。 Chrome 没有抱怨它并像以前一样工作，但是，FF 在 createSVGPoint 上抛出了一个错误。但是，它给了我使用 svg 比例值来尝试修复 mouseXY 点的想法。
示例项目的链接是 404

标签： svg firefox matrix-transform

【解决方案1】：

为了“修复”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 位置。

【讨论】：

我认为真正的解决方案比这容易得多。
这对我有用。我也认为有更好的方法来修复 FF CTM，但是，到目前为止，我所得到的只是人们批评缺乏最小可重复示例，所以，我只是花时间为下一个人实现我的工作解决方案。
我们不是在批评，我们是在询问，以便我们能够为您提供适当的帮助。