Bagaimanakah Saya Boleh Menyambungkan Div HTML dengan Talian Menggunakan SVG?

Menyambung Div HTML dengan Garisan

Dalam HTML dan CSS, anda boleh melukis garisan untuk menyambungkan div menggunakan Grafik Vektor Boleh Skala (SVG). Kaedah ini membolehkan anda membuat garisan antara div tanpa menggunakan elemen kanvas.

Langkah 1: Tentukan Div

Tentukan div yang anda ingin sambungkan menggunakan gaya CSS untuk saiz, kedudukan dan warna latar belakangnya:

<div>

Langkah 2: Buat SVG Baris

Dalam elemen SVG, tentukan garisan untuk menyambungkan div menggunakan atribut x1, y1, x2 dan y2:

<svg width="500" height="500"><line x1="50" y1="50" x2="350" y2="350" stroke="black"/></svg>

Dalam baris ini, x1 dan y1 mewakili pusat div1, dan x2 dan y2 mewakili pusat bagi div2.

Langkah 3: Letakkan SVG

Elemen SVG hendaklah diletakkan dalam HTML bersama div. Ia bertindak sebagai elemen visual yang menghubungkan mereka.

Hasil:

Div akan disambungkan dengan garis hitam. Anda boleh melaraskan atribut garisan (cth., warna lejang, ketebalan) dalam SVG untuk menyesuaikan penampilannya.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menyambungkan Div HTML dengan Talian Menggunakan SVG?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!