使用svg-pan-zoom时，Blazor中如何获取正确的SVG鼠标坐标？

方法1：直接使用svg-pan-zoom内置坐标转换API #

svg-pan-zoom官方提供了clientToPanZoom方法，可直接将浏览器客户端坐标转换为平移缩放后的SVG内部坐标，这是最精准的方案：

1. 初始化svg-pan-zoom时保存实例，并暴露转换函数给Blazor：

// 保存svg-pan-zoom实例
const svgPanZoomInstance = svgPanZoom('#target-svg', {
  zoomEnabled: true,
  panEnabled: true,
  // 其他你的配置项
});

// 供Blazor调用的坐标转换函数
window.getSVG_XY = function(clientX, clientY) {
  const convertedCoords = svgPanZoomInstance.clientToPanZoom(clientX, clientY);
  return { x: convertedCoords.x, y: convertedCoords.y };
};

2. 在Blazor的鼠标移动方法中传入客户端坐标调用函数：

private async Task SvgElementOnMouseMove(MouseEventArgs e)
{
    var svgCoords = await JS.InvokeAsync<Dictionary<string, double>>("getSVG_XY", e.ClientX, e.ClientY);
    double targetX = svgCoords["x"];
    double targetY = svgCoords["y"];
    // 处理转换后的SVG坐标
}

方法2：手动矩阵转换（内置API不可用时） #

如果无法使用内置方法，可通过SVG的变换矩阵逆运算手动计算：

window.getSVG_XY = function(clientX, clientY) {
  const svg = document.getElementById('target-svg');
  // 获取SVG到屏幕的变换矩阵
  const ctm = svg.getScreenCTM();
  // 计算逆矩阵，用于将屏幕坐标转回SVG坐标
  const inverseCtm = ctm.inverse();
  
  const svgPoint = svg.createSVGPoint();
  svgPoint.x = clientX;
  svgPoint.y = clientY;
  
  // 应用逆矩阵转换
  const resultPoint = svgPoint.matrixTransform(inverseCtm);
  return { x: resultPoint.x, y: resultPoint.y };
};

关键注意事项 #

• 必须使用鼠标事件的clientX/clientY（客户端坐标），而非pageX/pageY或offsetX/offsetY，否则会出现坐标偏差。
• 若SVG嵌套多层元素，务必获取最外层SVG元素的CTM，而非内部viewport组的矩阵，避免层级变换导致的误差。
• 测试时可在SVG上标记已知坐标点，验证转换结果是否匹配，排查视口设置或元素偏移的隐性问题。

内容的提问来源于stack exchange，提问作者Tim Davis