Javascript 在网站上用曲线连接元素

我正在寻找一个轻量级的库或代码片段，用一条曲线连接网站上的任意两个元素。这些元素不在画布上-可以是任何DOM元素-当浏览器窗口调整大小时，应重新绘制曲线

我正在努力实现的一个例子可以在这里看到：

---

我尝试过jsPlumb，但我正在寻找一个更轻量级的解决方案。

这里有一个自己动手的解决方案。制作一个覆盖整个文档的

svg

元素。插入一个svg

path

元素，该元素的起点和终点坐标是根据要连接的div的位置计算的，其曲线是根据这些起点和终点坐标以任何方式创建的

对于下面的示例，单击“运行代码片段”，然后单击“完整页面”按钮，然后调整窗口大小以查看效果

该示例中有两个div通过其水平内侧边缘的中间连接。当然，曲线的细节取决于您。连接器是使用svg路径的

d

属性构建的。在本例中，“M”是路径开始的“moveTo”坐标，“C”点是三次bezier曲线的第一个和第二个控制点以及最终坐标。您必须了解它们是什么，但它们是在svg元素中创建平滑曲线的一般方法

更复杂的文档需要更仔细地确定svg

path

元素的开始和结束坐标，但这个示例至少为您提供了一个开始的位置

var divA=document.querySelector（“#a”）；
var divB=document.querySelector（“#b”）；
var connector=document.querySelector（“连接器”）；
var drawConnector=函数（）{
var posnA={
x:divA.offsetLeft+divA.offsetWidth，
y:divA.offsetTop+divA.offsetHeight/2
};
var posnB={
x:divB.offsetLeft，
y:divB.offsetTop+divA.offsetHeight/2
};
var dStr=
“M”+
（posnA.x）+“，”+（posnA.y）+”+
“C”+
（posnA.x+100）+“，”+（posnA.y）+”+
（posnB.x-100）+“，”+（posnB.y）+”+
（posnB.x）+“，”+（posnB.y）；
connector.setAttribute（“d”，dStr）；
};
window.addEventListener（“调整大小”，drawConnector）；
牵引连接器（）
html，
身体{
宽度：100%；
身高：100%；
填充：0；
保证金：0；
}
div{
颜色：白色；
文本对齐：居中；
填充：10px；
位置：固定；
宽度：200px；
高度：100px；
}
#a{
背景颜色：蓝色；
顶部：20px；
左：20px；
}
#b{
背景色：红色；
底部：20px；
右：20px；
}

这是一个常规的HTML div。
这也是。
嗨，安德鲁，这正是我要找的。非常感谢您提供广泛而富有创造性的解决方案。我很高兴。我喜欢svg可以做的事情，我怀疑很多开发人员都没有意识到它的全部潜力。