5

我正在尝试画一条线，连接 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

4

1 回答 1

6

我想我能够自己解决问题。可以使用来实现对变换矩阵的访问

circ1[0][0].getCTM()

或通过使用

circ1[0][0].getScreenCTM()

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

更新的 jsfiddle 在这里

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

于 2013-06-14T12:34:50.973 回答