如何仅使用 HTML 和 CSS 将 HTML Div 与线条连接？

在没有 Canvas 的情况下用线条连接 HTML Div

用线条连接多个 HTML div 可以增强网页的视觉表示和布局。虽然使用 canvas 元素是一种常见方法，但也可以单独使用 HTML 和 CSS 来实现此目的。

一种方法是利用 SVG（可缩放矢量图形）线。 SVG 允许创建使用 XML 代码呈现的基于矢量的图形。

HTML 代码：

首先，定义要连接的 div：

<div>
<p><strong>SVG 线代码：</strong></p>
<p>创建一个SVG线条元素，指定连接div的坐标：</p>
<pre class="brush:php;toolbar:false"><svg width="svg width" height="svg height">
  <line x1="x-coordinate of div1 center" y1="y-coordinate of div1 center" x2="x-coordinate of div2 center" y2="y-coordinate of div2 center" stroke="line color"></line>
</svg>

例如，如果要连接上面定义的div的中心，您将使用以下代码：

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

CSS （可选）：

您可以使用 CSS 来设置线条样式，例如设置其粗细或颜色：

svg line {
  stroke-width: 2px;
}

使用 SVG 线条的优点：

• 轻量高效
• 只需要 HTML 和CSS
• 允许精确控制线条定位