如何获取svg中某个元素在画布上的真实位置

[ckinmind]

问题描述：比入某个rect元素我想获取这个元素在整个svg画布上的坐标位置x,y, 我现在能获取的位置只是想为位置，因为如果这个rect的直接父容器不是svg，而是g之类的，这个rect的位置是相对于容器的偏移，所以这样我就无法获取到这个rect元素的真实在画布的坐标

问题起因：在看到一个很酷炫的d3动画时看到这个问题，非常有价值, stackoverflow上也有这个问题的解决方案

 const pos = getRelPos(this, svg)

function getRelPos(node, svg) {
      var m = node.getCTM(); // 似乎和getScreenCTM等价
      var pos = svg.node().createSVGPoint();
      pos.x = d3.select(node).attr('x');
      pos.y = d3.select(node).attr('y');

      pos = pos.matrixTransform(m);

      return pos;
    }

这里this指代我要获取位置的元素，svg是整个容器

---

额外的资料 JavaScript操作SVG的一些知识

每个SVG元素对象上，都有一个getScreenCTM()的方法，它会返回一个SVGMatrix来表示元素的坐标系所做过的变换。此外SVG还有一种SVGPoint类型，它有x和y两个属性可以表示任一一个点，同时它还有一个matrixTransform()方法可以将点跟某个SVGMatrix相乘得到相应矩阵变换后的点。通过这些再加上一些线性代数的知识，就可以轻松的进行坐标系的变换了。
要注意的是SVGPoint只能通过svg元素对象的createSVGPoint()来创建，不能用new SVGPoint()这样的方式