javascript - 如何将svg元素坐标转换为屏幕坐标？

Question

有没有办法从 svg 元素获取屏幕/窗口坐标？
我已经看到了相反的解决方案，例如:

function transformPoint(screenX, screenY) {
   var p = this.node.createSVGPoint()
    p.x = screenX
    p.y = screenY
    return p.matrixTransform(this.node.getScreenCTM().inverse())
}

但我需要的是屏幕坐标。

抱歉，如果这是一个明显的问题，但我是 svg 的新手。
谢谢。

Answer 1

您在问题中包含的代码将屏幕坐标转换为 SVG 坐标。要走另一条路，你必须做与该功能相反的事情。
getScreenCTM()返回您需要转换坐标的矩阵。请注意，代码调用 inverse() ?那是反转矩阵，因此它在另一个方向上进行转换。

因此，您需要做的就是删除 inverse()从该代码调用。

var svg = document.getElementById("mysvg");

function screenToSVG(screenX, screenY) {
   var p = svg.createSVGPoint()
    p.x = screenX
    p.y = screenY
    return p.matrixTransform(svg.getScreenCTM().inverse());
}

function SVGToScreen(svgX, svgY) {
   var p = svg.createSVGPoint()
    p.x = svgX
    p.y = svgY
    return p.matrixTransform(svg.getScreenCTM());
}


var  pt = screenToSVG(20, 30);
console.log("screenToSVG: ", pt);

var  pt = SVGToScreen(pt.x, pt.y);
console.log("SVGToScreen: ", pt);

<svg id="mysvg" viewBox="42 100 36 40" width="100%">
</svg>