已废弃的JavaScript SVGPoint API替代方案是什么？如何改写坐标转换代码？

核心改写方案 #

已废弃的SVGPoint接口的替代实现是Web标准DOMPoint接口，原逻辑无需大幅调整，改写后代码如下：

function screenToSVG(screenX, screenY) {
  // 用标准DOMPoint创建坐标点，替代svg.createSVGPoint()
  const point = new DOMPoint(screenX, screenY);
  // 矩阵转换逻辑和原有实现完全一致
  return point.matrixTransform(svg.getScreenCTM().inverse());
}

补充说明 #

• DOMPoint属于通用几何接口，所有现代浏览器均已支持，兼容性覆盖Chrome 61+、Firefox 31+、Safari 10.1+、Edge 79+
• 若需要兼容极低版本浏览器，可添加降级逻辑，优先使用新API，兜底保留原有实现：

function screenToSVG(screenX, screenY) {
  let point;
  if (window.DOMPoint) {
    point = new DOMPoint(screenX, screenY);
  } else {
    point = svg.createSVGPoint();
    point.x = screenX;
    point.y = screenY;
  }
  return point.matrixTransform(svg.getScreenCTM().inverse());
}

• 处理点击事件时，直接传入event.clientX、event.clientY作为参数即可得到正确的SVG内部坐标

内容的提问来源于stack exchange，提问作者Mutant Bob