如何使用 SVG 将 HTML Div 与线条连接？

用线条连接 HTML Div

在 HTML 和 CSS 中，您可以使用可缩放矢量图形 (SVG) 绘制线条来连接 div。此方法允许您在不使用 canvas 元素的情况下在 div 之间创建线条。

第 1 步：定义 Div

使用 CSS 样式定义要连接的 div它们的大小、位置和背景颜色：

<div>
<p><strong>第 2 步：创建 SVG Line</strong></p>
<p>在 SVG 元素内，使用 x1、y1、x2 和 y2 属性定义连接 div 的线：</p>
<pre class="brush:php;toolbar:false"><svg width="500" height="500"><line x1="50" y1="50" x2="350" y2="350" stroke="black"></line></svg>

在此行中，x1 和 y1代表div1的中心，x2和y2代表div1的中心div2.

第 3 步：定位 SVG

SVG 元素应与 div 一起放置在 HTML 中。它充当连接它们的视觉元素。

结果：

div 将用黑线连接。您可以在 SVG 中调整线条的属性（例如描边颜色、粗细）以自定义其外观。