Javascript 从div到div绘制曲线SVG箭头线

我想使用SVG绘制两条弯曲的箭头线来连接两个元素，以指示它们来回移动，如下所示：

我读过一些关于SVG的书，但我不完全确定如何创建垂直线

---

第二，如果SVG采用坐标，我是否必须在创建SVG图形之前找到元素的坐标位置？如果调整了窗口大小，是否必须重新绘制？

制作一个

svg

元素，该元素（不可见）位于整个文档的下方。这将容纳两个箭头。插入两个svg

path

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

对于下面的示例，请单击“运行代码段”。然后单击并拖动任意一个div以查看箭头是如何动态创建的，即箭头随div移动。在代码片段中使用jQuery和jQueryUI只是为了允许轻松拖动div，而与箭头的创建和使用无关

此示例有两个箭头，起始和结束于div边的中间。当然，曲线的细节取决于您。箭头线是使用svg

path

的

d

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

元素添加的，您可以阅读该元素

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

path

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

回答您的具体问题：

• 如果SVG采用坐标，我是否必须在创建SVG图形之前找到元素的坐标位置？是的，正如我在代码中所做的

• 如果调整窗口大小，是否必须重新绘制？可能是的，这取决于调整窗口大小时div本身的情况

var divA=document.querySelector（“#a”）；
var divB=document.querySelector（“#b”）；
var arrowLeft=document.querySelector（“#arrowLeft”）；
var arrowRight=document.querySelector（#arrowRight”）；
var drawConnector=函数（）{
var posnALeft={
x:divA.offsetLeft-8，
y:divA.offsetTop+divA.offsetHeight/2
};
var posnARight={
x:divA.offsetLeft+divA.offsetWidth+8，
y:divA.offsetTop+divA.offsetHeight/2
};
var posnBLeft={
x:divB.offsetLeft-8，
y:divB.offsetTop+divB.offsetHeight/2
};
var posnBRight={
x:divB.offsetLeft+divB.offsetWidth+8，
y:divB.offsetTop+divB.offsetHeight/2
};
var dStrLeft=
“M”+
（posnALeft.x）+“，”+（posnALeft.y）+”+
“C”+
（posnALeft.x-100）+“，”+（posnALeft.y）+”+
（posnBLeft.x-100）+“，”+（posnBLeft.y）+”+
（posnBLeft.x）+“，”+（posnBLeft.y）；
箭头左。setAttribute（“d”，dStrLeft）；
var dStrRight=
“M”+
（posnBRight.x）+“，”+（posnBRight.y）+”+
“C”+
（posnBRight.x+100）+“，”+（posnBRight.y）+”+
（posnARight.x+100）+“，”+（posnARight.y）+”+
（posnARight.x）+“，”+（posnARight.y）；
setAttribute（“d”，dstright）；
};
美元（“#a，#b”）。可拖动({
拖动：函数（事件、ui）{
牵引连接器（）；
}
});
设置超时（drawConnector，250）；
/*此处的setTimeout delay仅用于防止
*箭头的初始外观不受限制
*不正确，因为动画扩展了
*单击后的堆栈溢出代码段结果
*“运行代码片段。”如果这是一个更简单的网站，
*一个简单的命令，即'drawConnector（）；`就够了。
*/

html，
身体{
宽度：100%；
身高：100%；
填充：0；
保证金：0；
}
#指示{
位置：固定；
左：50%；
}
#a、 #b{
颜色：白色；
文本对齐：居中；
填充：10px；
位置：固定；
宽度：100px；
高度：20px；
左：100px；
}
#a{
背景颜色：蓝色；
顶部：20px；
}
#b{
背景色：红色；
顶部：150px；
}

单击并拖动任一div以查看自动箭头调整
第一组
第2课

我发现安德鲁·威尔姆斯的答案非常有用。我对它进行了修改，创建了一个库，

draw\u arrow.js

，它导出一个函数

draw\u arrow（sel1，locs1，sel2，locs2，arr）

。这将从CSS选择器

sel1

标识的元素到

sel2

标识的元素绘制一个箭头

locs1

和

locs2

指示箭头在元件上的起始或结束位置

arr

标识一个SVG路径以容纳箭头

您可以从本章末尾的链接下载此文件，并查看两个演示。作为动画的一部分，我需要箭头来描绘与现代主义相关的各种主题之间的关系。这就是促使我找到并修改安德鲁的代码的原因注意：由于WordPress数据库存在一些问题，该链接当前不起作用，我必须修复这些问题。可以通过下面我对Henry Mont的评论中的链接获得箭头库和用于连续显示HTML元素的库以及演示。

这里有一个改进建议。我最初写这篇文章是作为一个新的、附加的答案，但有几个评论者对此表示不满，所以我不得不把它放在这里，希望它能引起注意。我追求这一点是因为模块化很重要。像

draw\u arrow

这样的例程应该要求用户尽可能少地执行

import arrowCreate, { DIRECTION } from 'arrows'

const arrow = arrowCreate({
  className: 'arrow',
  from: {
    direction: DIRECTION.LEFT,
    node: document.getElementById('from'),
    translation: [-0.5, -1],
  },
  to: {
    direction: DIRECTION.LEFT,
    node: document.getElementById('to'),
    translation: [0.9, 1],
  },
})

/*
  - arrow.node is HTMLElement
  - arrow.timer is idInterval from setInterval()
    REMEMBER about clearInterval(node.timer) after unmount
*/
document.body.appendChild(arrow.node);

.arrow {
  pointer-events: none;
}

.arrow__path {
  stroke: #000;
  fill: transparent;
  stroke-dasharray: 4 2;
}

.arrow__head line {
  stroke: #000;
  stroke-width: 1px;        
}