如何在JS中获取带有小数精度的鼠标位置？

核心原因 #

clientX/clientY返回整数是传统MouseEvent的旧规范实现限制，大部分浏览器为了兼容旧代码默认对这两个属性做了取整处理，和页面是否放大无关。

落地实现方案 #

• 优先使用PointerEvent指针事件替代传统鼠标事件
  PointerEvent是现行W3C标准的指针交互接口，原生支持浮点精度的坐标属性，监听pointermove而非mousemove即可直接拿到亚像素级的坐标值：

// 给你的SVG元素绑定事件
const svg = document.querySelector('your-svg-selector');
svg.addEventListener('pointermove', (e) => {
  // e.clientX、e.clientY默认返回浮点精度的视口坐标
  console.log('高精度视口坐标', e.clientX, e.clientY);
});

• SVG场景额外做坐标映射，适配SVG自身的缩放、平移变换
  SVG存在独立的用户坐标系，拿到视口坐标后需要做矩阵变换才能得到SVG内部的实际坐标，避免缩放后坐标偏移：

function convertToSvgCoordinate(svgElement, clientX, clientY) {
  const point = svgElement.createSVGPoint();
  point.x = clientX;
  point.y = clientY;
  // 应用SVG的屏幕变换矩阵逆运算，得到SVG内部坐标
  return point.matrixTransform(svgElement.getScreenCTM().inverse());
}

// 调用示例
svg.addEventListener('pointermove', (e) => {
  const svgPoint = convertToSvgCoordinate(svg, e.clientX, e.clientY);
  // svgPoint.x、svgPoint.y就是SVG内部的高精度坐标，支持小数
  console.log('SVG内部坐标', svgPoint.x, svgPoint.y);
});

• 旧浏览器兼容方案
  如果需要兼容不支持PointerEvent的老旧浏览器，可以用getBoundingClientRect做坐标换算，能获得比直接取clientX更高的精度：

svg.addEventListener('mousemove', (e) => {
  const rect = svg.getBoundingClientRect();
  // 计算得到SVG元素内的浮点坐标
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;
  console.log('兼容模式高精度坐标', x, y);
});

注意事项 #

• 不要使用pageX/pageY获取坐标，这两个属性的整数取整规则更严格，无法拿到小数精度
• 拿到的浮点坐标可以直接传给绘图API，不需要手动取整，SVG、Canvas原生支持亚像素渲染，能实现更平滑的绘制效果

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