Bagaimana untuk Mencipta Menu Pekeliling Boleh Diklik dengan Laluan SVG?

Mencipta Kalangan dengan Pautan pada Sempadannya

Pengenalan

Membuat kalangan boleh klik dengan segmen yang berbeza boleh meningkatkan interaksi pengguna dan daya tarikan visual. Dalam artikel ini, kami akan meneroka cara untuk mencapai ini menggunakan elemen laluan SVG, menggunakan persamaan trigonometri untuk mengira koordinat dan melukis lengkok.

Mencari Titik pada Bulatan

Kepada mencipta segmen genap di sekeliling bulatan, kita perlu mengira koordinat titik tertentu di sepanjang lilitannya. Ini boleh dilakukan menggunakan persamaan trigonometri:

X Koordinat = (Jejari * Cos(Sudut dalam Radian)) X Koordinat Pusat

Y Koordinat = ( Jejari * Sin(Sudut dalam Radian)) Y Koordinat bagi Pusat

Sudut dalam Radian = (Sudut dalam Darjah * Math.PI / 180)

Membina Laluan SVG

Setelah mata dikira, kami boleh menentukan laluan SVG untuk menyambungkannya. Laluan harus bermula dan berakhir di titik tengah, melukis garis ke titik permulaan dan lengkok ke titik akhir.

Sebagai contoh, untuk mencipta laluan untuk bulatan dengan 6 segmen, kami akan menggunakan:

<path d="M55,55 L105,55 A50,50 0 0,1 80,98.30z" />

Di sini, 55,55 mewakili titik tengah dan bentuk lengkok ditakrifkan menggunakan jejari (50), darjah sapuan (0) dan sudut daripada putaran (1).

Demo Bulatan dengan 6 Segmen

Sampel SVG ini menggambarkan bulatan dengan 6 segmen, setiap satu dipautkan ke titik akhir yang berbeza .

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Menu Pekeliling Boleh Diklik dengan Laluan SVG?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!