如何获取<svg>元素的有效viewBox？是否有现成接口？

SVG提供了原生API直接处理屏幕坐标到SVG用户坐标系的转换，完全不需要手动计算viewBox和preserveAspectRatio作用后的实际视口。核心方法是利用坐标变换矩阵来完成转换：

关键API说明 #

• SVGSVGElement.getScreenCTM()：返回一个DOMMatrix对象，代表从SVG内部用户坐标系到元素屏幕坐标系的转换矩阵，已经自动考虑了viewBox、preserveAspectRatio、元素缩放/平移等所有布局因素。
• SVGPoint.matrixTransform()：将坐标点应用指定的变换矩阵，这里我们用矩阵的逆矩阵来把屏幕坐标反向转换为SVG内部坐标。

代码示例 #

以下是将鼠标点击的offsetX/offsetY转换为SVG坐标的完整实现：

const svgElement = document.querySelector('svg');

svgElement.addEventListener('click', (event) => {
  // 获取SVG到屏幕的变换矩阵，并生成其逆矩阵
  const transformMatrix = svgElement.getScreenCTM();
  const inverseMatrix = transformMatrix.inverse();

  // 创建存储屏幕坐标的SVGPoint对象
  const screenPoint = svgElement.createSVGPoint();
  screenPoint.x = event.offsetX;
  screenPoint.y = event.offsetY;

  // 应用逆变换，得到SVG用户坐标系中的坐标
  const svgCoordinate = screenPoint.matrixTransform(inverseMatrix);

  console.log(`转换后的SVG坐标：x=${svgCoordinate.x.toFixed(2)}, y=${svgCoordinate.y.toFixed(2)}`);
});

额外说明 #

如果确实需要获取viewBox经过preserveAspectRatio调整后的实际显示区域，也可以通过转换矩阵推导，但对于坐标转换场景，直接使用上述方法是最高效且不易出错的方案——它自动处理了所有布局相关的计算，无需手动解析viewBox和preserveAspectRatio的规则。

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