如何将SVG元素坐标转换为屏幕坐标？如何获取SVG元素屏幕坐标？

没问题！其实你已经摸到门道啦——既然你知道用getScreenCTM().inverse()实现屏幕坐标转SVG坐标，那**正向转换只需要去掉.inverse()**就搞定了😎

核心原理 #

SVG的getScreenCTM()方法返回的矩阵，本身就代表了从SVG元素的本地坐标系统到屏幕（窗口）坐标系统的变换关系。所以直接用这个矩阵转换点，就能得到对应的屏幕坐标。

基础转换函数 #

如果你有一个SVG元素的本地坐标(x,y)，可以用下面的函数转换成屏幕坐标：

function svgToScreenPoint(svgX, svgY) {
  // 创建一个SVGPoint对象
  const p = this.node.createSVGPoint();
  p.x = svgX;
  p.y = svgY;
  // 直接使用getScreenCTM()做矩阵变换，不需要逆矩阵
  return p.matrixTransform(this.node.getScreenCTM());
}

调用后会返回一个包含x和y属性的对象，就是对应的屏幕坐标啦。

获取SVG元素的屏幕位置 #

如果想获取某个SVG元素（比如一个矩形、路径）在屏幕上的位置，可以结合getBBox()获取元素的本地边界，再转换：

function getElementScreenPosition(svgElement) {
  // 获取元素的本地边界框
  const bbox = svgElement.getBBox();
  // 创建SVGPoint，取元素的左上角坐标
  const p = svgElement.ownerSVGElement.createSVGPoint();
  p.x = bbox.x;
  p.y = bbox.y;
  // 应用变换矩阵
  const screenPoint = p.matrixTransform(svgElement.getScreenCTM());
  return {
    x: screenPoint.x,
    y: screenPoint.y
  };
}

小提示 #

• 确保SVG元素已经插入到DOM中，不然getScreenCTM()可能返回null或者不准确的结果
• 如果你的SVG元素嵌套在带transform属性的父元素（比如<g>）里，getScreenCTM()会自动计算所有父元素的变换总和，不用手动叠加哦

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