Snap SVG：用线条连接可拖动的形状（即使拖动后线条也应保持连接）
Snap SVG: Connecting draggable shapes with lines (lines should keep being connected even after dragging )
我已经到了需要你帮助的地步。我创建了 3 个 svg 矩形，我的目标是能够用一条线将其中的任意两个连接在一起。问题是我的矩形是可拖动的，如果其中两个是连接的，则它们需要保持连接。我做了一个jsbin来测试它：
https://jsbin.com/moxiyugovo/edit?html,js,console,output
单击顶部的紫色图标，然后在要连接的形状上单击一次，即可完成连接。
我的问题是，通过这种方式我可以用一条线连接 2 个形状，但是当我想进行另一个连接时，之前的线消失了。我知道发生这种情况是因为我为我创建的每一行都使用了相同的 var 名称 (L)，因此它们往往会相互重叠。我怎样才能区分这些线？假设我想将 2 个蓝色矩形相互连接，将 2 个红色矩形相互连接，并保持这种方式，以便如果拖动其中任何一个，则相应的线指向 "follows" 形状。预先感谢任何检查它的人。
P.S。 : 用户是需要选择连接哪些形状的人，因此无法预先连接它们。
我找到了一种方法，我对一行使用了全局变量，尽管不推荐这样做。它可以正常工作，但我需要对其进行编辑，并在有空余时间时使其变得更好。但是对于任何对我的意思感兴趣的人，这里有一个垃圾箱：
我已经到了需要你帮助的地步。我创建了 3 个 svg 矩形，我的目标是能够用一条线将其中的任意两个连接在一起。问题是我的矩形是可拖动的，如果其中两个是连接的，则它们需要保持连接。我做了一个jsbin来测试它：
https://jsbin.com/moxiyugovo/edit?html,js,console,output
单击顶部的紫色图标，然后在要连接的形状上单击一次，即可完成连接。
我的问题是，通过这种方式我可以用一条线连接 2 个形状，但是当我想进行另一个连接时，之前的线消失了。我知道发生这种情况是因为我为我创建的每一行都使用了相同的 var 名称 (L)，因此它们往往会相互重叠。我怎样才能区分这些线？假设我想将 2 个蓝色矩形相互连接，将 2 个红色矩形相互连接，并保持这种方式，以便如果拖动其中任何一个，则相应的线指向 "follows" 形状。预先感谢任何检查它的人。
P.S。 : 用户是需要选择连接哪些形状的人，因此无法预先连接它们。
我找到了一种方法，我对一行使用了全局变量，尽管不推荐这样做。它可以正常工作，但我需要对其进行编辑，并在有空余时间时使其变得更好。但是对于任何对我的意思感兴趣的人，这里有一个垃圾箱：