如何将相对于元素定义的 SVG 坐标 (x,y) 转换为绝对坐标/位置？

Question

我正在尝试画一条线，连接 SVG 中的两个圆圈。圆圈是 - 连同封装在 SVG 组元素中的底层矩形 ()。这些组使用 transform="translate(x,y)" 属性定位。 我的问题是，组内元素的坐标相对于其组的原点（0,0 坐标）定位。要放置覆盖线，我需要知道绝对坐标。

这是使用 D3 javascript 库的代码：

var body = d3.select("body");

var svg = body.append("svg");

var group1 = svg.append("g")
    .attr("transform", "translate(50,50)");

var rect1 = group1.append("svg:rect")
    .attr("x", 0)
    .attr("y", 0)
    .attr("width", 100)
    .attr("height", 100)
    .style("fill", 'lightblue');

var circ1 = group1.append("svg:circle")
    .attr("cx", 50)
    .attr("cy", 50)
    .attr("r", 10)
    .style("fill", 'red')

var group2 = svg.append("g")
    .attr("transform", "translate(350,50)");

var rect2 = group2.append("svg:rect")
    .attr("x", 0)
    .attr("y", 0)
    .attr("width", 100)
    .attr("height", 100)
    .style("fill", 'lightgreen');

var circ2 = group2.append("svg:circle")
    .attr("cx", 50)
    .attr("cy", 50)
    .attr("r", 10)
    .style("fill", 'red');

var line = svg.append("svg:line")
    .attr("x1", parseInt(circ1.attr("cx")))
    .attr("y1", parseInt(circ1.attr("cy")))
    .attr("x2", parseInt(circ2.attr("cx")))
    .attr("y2", parseInt(circ2.attr("cy")))
    .attr("stroke", "black");

我知道为什么这条线没有出现。我也知道每个 SVG 元素都与一个转换矩阵有关。我不确定如何访问圆形元素的矩阵以及如何获取它们的绝对坐标（cx/cy 属性）。另一种可能性是获得圆圈的绝对距离。

这是jsfiddle with the above code

Answer 1

我认为我能够自己解决问题。可以使用

来实现对变换矩阵的访问

circ1[0][0].getCTM()

或通过使用

circ1[0][0].getScreenCTM()

通过将 e 属性的值添加到 x 坐标和 的值>f 属性到 y 坐标我能够得到元素的“绝对位置”。

更新的 jsfiddle 是 here

恐怕我的解决方案并不普遍有效。例如，我不确定在计算位置之前使用 transform: scale 会发生什么？