javascript - 移动设备上的 SVG 尺寸与浏览器仿真不同

Question

我有一个 svg，我想使用单击处理程序来确定用户单击了哪个象限。所以我获取指针坐标，通过矩阵变换运行它们以获取 svg 坐标并与 svg 大小进行比较。这似乎适用于桌面浏览器和移动仿真。它不适用于实际的手机，因为我得到了不同的 svg 尺寸。

这是代码笔，您必须单击内部才能读出尺寸。

https://cdpn.io/seansly/debug/jOwQRoN/WPMLYRJXqxJr

我想知道我是否配置错误。

这是生成尺寸读数的点击处理程序：

function handleClick(e) {

    if (zoomed) {
        zoomOut();
        zoomed = false;
        return;
    }

    var quadrant = 0;
    var pt = svgCoords(e);
    var x = pt.x;
    var y = pt.y;

    var width = svg.width.baseVal.value;
    var height = svg.height.baseVal.value;

    document.querySelector("#v1").innerHTML = "width: " + width;
    document.querySelector("#v2").innerHTML = "height: " + height;
    document.querySelector("#v3").innerHTML = "x: " + x;
    document.querySelector("#v4").innerHTML = "y: " + y;

    if (x < (width / 2) && y < (height / 2)){
        quadrant = 1;
    } else if (x < (width / 2) && y > (height / 2)) {
        quadrant = 2;
    } else if (x > (width / 2) && y > (height / 2 )) {
        quadrant = 3;
    } else if (x > (width / 2) && y < (height / 2)) {
        quadrant = 4;
    }


    if (!zoomed && quadrant > 0) {
        zoomOnQuadrant(quadrant);
        zoomed = true;
    }
}

function svgCoords(e) {
        var pt = new DOMPoint();
        pt.x = e.clientX;
        pt.y = e.clientY;
        return pt.matrixTransform(svg.getScreenCTM().inverse());
    }

然后是两个不同的结果：

标签： javascriptsvgmouseeventmouse