svg - 如何将相对于元素定义的 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 的情况下会发生什么？