SVG を使用して HTML Div を線で接続するにはどうすればよいですか?

HTML Div を線で接続する

HTML と CSS では、Scalable Vector Graphics (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 要素は、HTML 内で div の横に配置する必要があります。これはそれらを接続する視覚要素として機能します。

結果:

div は黒い線で接続されます。 SVG 内で線の属性 (ストロークの色、太さなど) を調整して、外観をカスタマイズできます。