javascript - 如何将 HTML Div 与 Lines 连接起来？

Question

这个问题已经有答案了:

Draw a connecting line between two elements [closed] (12 个回答)

已关闭 6 年前。

在我的页面上，我有一组 div 元素，它们应该与下图所示的线条连接。我知道使用 Canvas 可以在这些元素之间绘制线条，但是是否可以在 html/css 中以另一种方式进行绘制？

Answer 1

您可以仅使用 HTML 和 CSS 使用 SVG 连接两个 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的中心

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

<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>