什么是SVGPoint JavaScript API的替代方案？

Question

我需要将javascript的点击事件转换为SVG元素的坐标空间。目前我正在使用类似https://dev59.com/PVYM5IYBdhLWcg3wzSkg#48354404的技术，但https://developer.mozilla.org/en-US/docs/Web/API/SVGPoint说SVGpoint“不再推荐”且“可能随时停止使用”。

不幸的是，它没有提到应该使用什么API来替代它。

我该如何重写代码示例？

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

为了避免使用已被弃用的API？

- Mutant Bob

---

https://developer.mozilla.org/zh-CN/docs/Web/API/DOMPoint，尽管 SVGPoint 比以前不那么过时了。DOMPoint 在 Firefox 中可用，其他 UA 尚不确定。 - Robert Longson

网络上有很多使用SVGPoint的代码。我不会担心它很快就会消失。它还会存在很多年。 - Paul LeBeau

Answer 1

使用DOMPoint()。我自己也在寻找这个，看起来它可以1:1替换SVGPoint。这里有一个例子：

const svg = document.getElementById('svg01');
const print = document.getElementById('print');

const toSVGPoint = (svg, x, y) => {
  let p = new DOMPoint(x, y);
  return p.matrixTransform(svg.getScreenCTM().inverse());
};

svg.addEventListener('click', e => {
  let p = toSVGPoint(e.target, e.clientX, e.clientY);
  print.textContent = `x: ${p.x} - y: ${p.y}`;
});

svg {
  border: thin solid black;
  cursor: pointer;
}

<p id="print">Position</p>
<svg id="svg01" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 500" width="400">
  <text font-size="100" x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" pointer-event="none">Click me...</text>
</svg>

- chrwahl

---

有关Chromium何时支持**.isPointInFill**的信息？FireFox可以正常工作。https://developer.mozilla.org/en-US/docs/Web/API/SVGGeometryElement/isPointInFill - Danny '365CSI' Engelman