svg两个方框之间的连线，在一个方框移动后自动维持连接

可以使用SVG的 `<line>` 元素来实现两个方框之间的连线，同时使用JavaScript来更新线条的起点和终点位置，从而实现移动一个方框后自动维持连接。

首先，为每个方框添加一个唯一的ID，例如：

<rect id="box1" x="50" y="50" width="100" height="100" />
<rect id="box2" x="200" y="100" width="150" height="80" />

然后，在两个方框之间添加一个 `<line>` 元素，并设置其起点和终点的坐标为方框的中心坐标，例如：

<line id="line1" x1="100" y1="100" x2="275" y2="140" stroke="black" stroke-width="2" />

然后，使用JavaScript来更新线条的起点和终点位置，例如：

var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
var line1 = document.getElementById("line1");

function updateLine() {
  var box1X = parseFloat(box1.getAttribute("x")) + parseFloat(box1.getAttribute("width")) / 2;
  var box1Y = parseFloat(box1.getAttribute("y")) + parseFloat(box1.getAttribute("height")) / 2;
  var box2X = parseFloat(box2.getAttribute("x")) + parseFloat(box2.getAttribute("width")) / 2;
  var box2Y = parseFloat(box2.getAttribute("y")) + parseFloat(box2.getAttribute("height")) / 2;
  
  line1.setAttribute("x1", box1X);
  line1.setAttribute("y1", box1Y);
  line1.setAttribute("x2", box2X);
  line1.setAttribute("y2", box2Y);
}

updateLine();

box1.addEventListener("mousemove", function() {
  updateLine();
});

box2.addEventListener("mousemove", function() {
  updateLine();
});

在上面的代码中，`updateLine()`函数用来更新线条的起点和终点位置，`box1`和`box2`是两个方框的元素，`line1`是它们之间的线条元素。`updateLine()`函数首先计算出两个方框的中心坐标，然后设置线条的起点和终点坐标为这些中心坐标。最后，在两个方框上添加`mousemove`事件，当方框移动时，就会调用`updateLine()`函数来更新线条的位置。

这样，当你移动一个方框时，线条就会自动维持连接了。