SVG를 사용하여 HTML Div를 선과 어떻게 연결할 수 있습니까?

선으로 HTML Div 연결

HTML 및 CSS에서는 SVG(Scalable Vector Graphics)를 사용하여 선을 그려 div를 연결할 수 있습니다. 이 방법을 사용하면 캔버스 요소를 사용하지 않고 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 내에서 선의 속성(예: 획 색상, 두께)을 조정하여 모양을 사용자 정의할 수 있습니다.