<分区>
在我的页面上，我有一组 div 元素，它们应该像我在下图中显示的那样用线连接。我知道使用 Canvas 我可以在这些元素之间画线，但是否可以在 html/css 中以另一种方式进行绘制？
标签 javascript jquery html css
<分区>
在我的页面上，我有一组 div 元素，它们应该像我在下图中显示的那样用线连接。我知道使用 Canvas 我可以在这些元素之间画线，但是否可以在 html/css 中以另一种方式进行绘制？
最佳答案
您可以使用 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的中心
您可以在下面的代码片段中查看它的外观
<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>关于javascript - 如何将 HTML Div 与线条连接起来？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19382872/