如何将相对于元素定义的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

Answer 1

我想我能够自己解决这个问题.使用可以实现对转换矩阵的访问

circ1[0][0].getCTM()

或者通过使用

circ1[0][0].getScreenCTM()

通过将e属性的值添加到x坐标并将f属性的值添加到y坐标,我能够获得元素的"绝对位置".

更新的jsfiddle在这里

我担心我的解决方案不是普遍有效的.例如,我不确定在我将使用变换的情况下会发生什么:在计算位置之前进行缩放？