如何使用 SVG 將 HTML Div 與線條連接？

使用SVG 將HTML Div 與線條連接

要顯示HTML div 之間的連接，您可以利用可縮放向量圖形(SVG ) 的強大功能，可讓您建立線條並在視覺上連接div 元素，而無需依賴畫布元素。以下是如何使用HTML 和CSS 實現此目的的簡單指南：

首先建立要連接的div，每個div 都有自己唯一的ID 和樣式來設定其位置和尺寸：

<div>
<p>接下來，您將建立一個SVG 元素並繪製一條線來連接這些div。 SVG 元素具有指定的寬度和高度來表示畫布的尺寸。 line元素有x1、y1、x2、y2屬性，分別表示線的起點與終點。調整這些座標以符合要連接的 div 元素的中心：</p>
<pre class="brush:php;toolbar:false"><svg width="..." height="...">
  <line x1="..." y1="..." x2="..." y2="..." stroke="black"></line>
</svg>

透過指定線條起點和終點的 x 和 y 座標，您可以定義線條的路徑並有效連接相應的 div。

這是一個示範如何連接兩個 div 的程式碼片段：

<div><p>此方法可以實現您無需依賴 JavaScript 或 canvas 元素即可直觀地連接 HTML div。透過使用 SVG，您可以獲得更大的靈活性並控制這些連接線的外觀和位置。 </p></div>