如何在旋转矩形和非旋转矩形之间画一条线?

Question

我有两个矩形，其中一个旋转了90度，我怎么在这两个矩形之间画一条线呢

<svg width="200" height="100" viewBox="-100 -50 200 100">
<g transform="scale(1,-1)">
    <g class="group" transform="">
        <g class="g1">
            <rect x="5" y="5" width="5" height="5" fill="red" class="rectA" style="fill: red;"></rect>
        </g>
        <g class="g2" transform="rotate(-90)">
            <rect x="10" y="10" width="10" height="10" fill="red" class="rectB" style="fill: green;"></rect>
        </g>
    </g>
</g>

我认为脚本是

    var rectA = d3.select(".rectA");
var rectB = d3.select(".rectB");
var x1 = rectA.attr("x");
var y1 = rectA.attr("y");
var x2 = rectB.attr("x");
var y2 = rectB.attr("y");
d3.select(".group").append("line").attr({ x1: x1, y1: y1, x2: x2, y2: y2 })
 .style("stroke", "blue").attr("class", "distanceLine").style("stroke-width", 3);

但是结果是不正确的，我该怎么办?

谢谢。我JSFiddle

我想要这样的图片

Answer 1

如果您希望行尾匹配一些转换后的坐标，那么您必须对其应用相同的转换。

    var x1 = rectA.attr("x");
    var y1 = rectA.attr("y");
    var x2 = rectB.attr("x");
    var y2 = rectB.attr("y");
    var  p2 = rotate(x2,y2, -90);
    d3.select(".group")
      .append("line")
      .attr({ 'x1': x1, 'y1': y1, 'x2': p2[0], 'y2': p2[1] })
      .style("stroke", "blue")
      .attr("class", "distanceLine")
      .style("stroke-width", 3);

function rotate(x, y, angle) {
   angle = angle * Math.PI / 180;  // convert to radians
   return [Math.cos(angle) * x - Math.sin(angle) * y,
           Math.cos(angle) * y + Math.sin(angle) * x];
}