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 的情况会发生什么？

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

1 个答案: