如何在不使用 Canvas 的情況下將 HTML Div 與線條連接？

在沒有 Canvas 的情況下用線條連接 HTML Div

在 Web 開發中，經常需要用線條連接網頁上的元素。雖然畫布提供了一種簡單的方法，但它可能並不總是最合適的選擇。以下是僅使用HTML 和CSS 將HTML div 與線條連接起來的方法：

使用SVG

可縮放向量圖(SVG) 提供了一種建立形狀和線條的通用方法在網頁文檔中。要使用SVG 連接兩個div，請按照以下步驟操作：

1. 建立兩個具有必要樣式和位置的div 元素：

<div>
<ol start="2"><li>將SVG 元素新增至您的HTML文件並建立一個連接兩個中心的線元素divs:</li></ol>
<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 表示第一個div 的中心，x2 和y2 表示第二個div 的中心。

定位 SVG 線

調整 x1、y1、 x2 和 y2 以確保線精確連接兩個 div。請記住，座標是相對於 SVG 元素的左上角的。

結論

此方法可讓您只使用線連接 HTML div HTML 和 CSS。 SVG 提供了靈活高效的解決方案，可輕鬆自訂以滿足您的特定設計要求。