Javascript 如何将HTML div与行连接？

在我的页面上，我有一组div元素，这些元素应该与下图中显示的行相连接。我知道，通过画布，我可以在这些元素之间画线，但是否可以用html/css的另一种方式来做呢

---

定位有点困难，但您可以使用

1px

宽div作为线和位置，并适当旋转它们

---

任何数量的库和/或HTML5技术都是绝对可能的。您可以通过使用border-bottom属性之类的东西，在纯CSS中对某些内容进行黑客攻击，但这可能会非常糟糕

---

如果您对此很认真，那么应该看看用于画布绘制或SVG的JS库。例如，类似或的内容创建一个div，该div是一行代码，如下所示：

CSS

HTML

这将显示一个块，该块与另一个块之间有一条水平线

---

在您可以使用的移动设备上（caniuse.com/transforms2d）

从此线程检查我的小提琴：

---

布局不同，但基本上是在框之间创建不可见的div，并使用jQuery添加相应的边框（答案只有HTML和CSS）

您可以使用。这允许您连接DOM中的块元素。

您可以使用SVG仅使用HTML和CSS连接两个DIV：

<div id="div1" style="width: 100px; height: 100px; top:0; left:0; background:#777; position:absolute;"></div>
<div id="div2" style="width: 100px; height: 100px; top:300px; left:300px; background:#333; position:absolute;"></div>

（请使用单独的css文件进行样式设置）

创建一个svg行，并使用该行连接上面的div

<svg width="500" height="500"><line x1="50" y1="50" x2="350" y2="350" stroke="black"/></svg>

在哪里,

x1，y1表示第一个div的中心，
x2，y2表示第二个div的中心

您可以在下面的代码段中查看它的外观

功能调整线路（从、到、线路）{
var fT=from.offsetTop+from.offsetHeight/2；
var tT=to.offsetTop+to.offsetHeight/2；
var fL=from.offsetLeft+from.offsetWidth/2；
var tL=to.offsetLeft+to.offsetWidth/2；
var CA=数学绝对值（tT-fT）；
var CO=数学绝对值（tL-fL）；
var H=数学sqrt（CA*CA+CO*CO）；
var ANG=180/Math.PI*Math.acos（CA/H）；
如果（tT>fT）{
var top=（tT-fT）/2+fT；
}否则{
var-top=（fT-tT）/2+tT；
}
如果（tL>fL）{
左变量=（tL fL）/2+fL；
}否则{
左变量=（fL tL）/2+tL；
}
如果（（tTtT&fL>tL）|（tT>fT&tL>fL））{
ANG*=-1；
}
top-=H/2；
线条样式[“-webkit transform”]=“rotate（“+ANG+”deg）”；
线条样式[“-moz transform”]=“rotate（“+ANG+”deg）”；
线条样式[“-ms transform”]=“rotate（“+ANG+”deg）”；
线条样式[“-o-transform”]=“旋转（'+ANG+'deg）”；
线条样式[“-transform”]=“rotate（“+ANG+”deg）”；
line.style.top=top+'px'；
line.style.left=left+'px'；
line.style.height=H+‘px’；
}
调整线(
document.getElementById（'div1'），
document.getElementById（'div2'），
document.getElementById（'行'）
);
#内容{
位置：相对位置；
}
mydiv先生{
边框：1px实心#368ABB；
背景色：#43A4DC；
位置：绝对位置；
}
.mydiv:之后{
内容：无关闭报价；
位置：绝对位置；
最高：50%；
左：50%；
背景色：黑色；
宽度：4px；
高度：4px；
边界半径：50%；
左边距：-2px；
页边顶部：-2px；
}
#第一组{
左：200px；
顶部：200px；
宽度：50px；
高度：50px；
}
#第二组{
左：20px；
顶部：20px；
宽度：50px；
高度：40px；
}
#线{
位置：绝对位置；
宽度：1px；
背景色：红色；
}

您问我是否可能，我会说是，但使用css我会说不可能，因为我认为这类内容应该完全留给SVG。主要是因为这可以使用CSS黑客创建，但在移动设备中网站将变得不定位请参考我的回答：不要忘记包括-webkit转换：旋转（120度）；对于那些不使用IE9和webkit前缀的用户。这在移动设备上有效吗？@marsone应该有效，但当我使用Canvas时，我无法在对象上绑定事件？这完全取决于您想要做什么。如果您关心鼠标点击，您可以访问mouseMove和click事件，并将当前鼠标位置与画布中元素的位置进行比较。有许多2d和3d画布/webGL草图可响应鼠标/键盘事件。我只是做了另一个随机的谷歌搜索，发现它看起来真的很不错，并且在头版上有一个响应性的演示。PS：为了移动div，你可能需要你的
行
相应地更新坐标。但为此，您必须使用JavaScript/JQuery。访问此链接了解如何操作->感谢您提供的数学解决方案这是一个很棒的库！非常易于使用和扩展。如果按原样运行，则不会显示块或行。
div#lineHorizontal {
    background-color: #000;
    width: //the width of the line or how far it goes sidewards;
    height: 2px;
    display: inline-block;
    margin: 0px;
 }
div#block {
    background-color: #777;
    display: inline-block;
    margin: 0px;
}

<div id="block">
</div>
<div id="lineHorizontal">
</div>
<div id="block">
</div>

<div id="div1" style="width: 100px; height: 100px; top:0; left:0; background:#777; position:absolute;"></div>
<div id="div2" style="width: 100px; height: 100px; top:300px; left:300px; background:#333; position:absolute;"></div>

<svg width="500" height="500"><line x1="50" y1="50" x2="350" y2="350" stroke="black"/></svg>