Javascript 如何使用svg连接不同位置的点？

正如您所看到的，我对使用svg是新手，我在连接点时遇到了问题

我想做的是把这两个点连接成一条线，不管它们的位置如何

正如您在下图中看到的，当我将cx=“50”更改为cx=“510”时，该线仍处于相同的位置，但我希望该线“跟随”第二个圆圈，无论其位置如何

恢复：

在我的例子中，我有一条静态线，当我改变坐标（cx或cy）时，我希望它有一条与另一个点相连的dinamic线

var按钮={}；
函数点单击（宽度）{
（宽度===0）？buttons.one=！buttons.one:buttons.two=！buttons.two；
document.getElementById（“line0”）.setAttribute（“笔划”、“按钮1和按钮2”）“红色”：“；
document.getElementById（“circle0”）.setAttribute（“填充”，按钮1：“红色”：“灰色”）；
document.getElementById（“circle1”）.setAttribute（“填充”，按钮2“红色”：“灰色”）；
}

以实现预期的变更行x2

<line id="line0" x1="50" y1="50" x2="510" y2="100" />

代码笔-

动态线的更新代码笔

---

我可以尝试为您添加一个代码示例来说明我的意思，但也许现在一个文本解释就足够了

如果你想把这两个点连接起来，不管它们在哪里，试着把<代码>圆圈< /C>元素中的属性传递给<代码>行元素。第一个圆的

cx

和

cy

将对应于行的

x1

和

y1

，第二个圆将是

x2

和

y2

。（您可以同样轻松地使用

getAttribute

从

circle

元素中获取此信息）

您是如何获得此信息的，无论是通过单击处理程序还是通过您现在的操作方式（简单地根据元素的id抓取元素并将其推入）都不重要。关键点是，无论这些圆在哪里，您都希望这些圆为

线

坐标提供信息，而不是硬编码

---

我希望这有助于作为一个起点。如果你还在挣扎，请随时发表评论。您非常接近，但我非常希望看到您完成：）

但在您的示例中，您有一条“静态”线。我想要的是一条dinamic线，每次我改变坐标（cx和cy），这条线都会跟随另一个圆。我不知道我是否解释得很好，但这正是我想做的。如果你阅读问题的第二行，他明确指出“我想做的是将这两个点与一条线连接起来，无论它们的位置如何。”你可以根据以下要点改编/使用

drawPath

函数：