Bagaimana untuk Membuat Bulatan Boleh Diklik dengan Segmen Laluan SVG Terpaut?

Membuat Bulatan dengan Segmen Sempadan Berpaut

Dalam usaha anda untuk meniru bulatan yang disediakan dengan sisi oren boleh klik, jelaslah bahawa menggunakan sempadan sahaja tidak akan mencukupi. Penyelesaiannya terletak pada penggunaan laluan SVG dan trigonometri untuk menjana koordinat yang akan mentakrifkan segmen bulatan.

Mengira Titik pada Bulatan

Untuk mencari koordinat bagi segmen , kami menggunakan persamaan trigonometri berdasarkan bilangan segmen yang dikehendaki. Sebagai contoh, untuk membuat bulatan dengan enam segmen, kami membahagikan 360 darjah dengan 6, menghasilkan segmen 60 darjah.

Dari sini, koordinat X dan Y bagi setiap titik boleh diperoleh menggunakan persamaan berikut:

• Koordinat X = Jejari * Cos(Sudut dalam Radian) Titik Pusat X Koordinat
• Y Koordinat = Jejari * Sin(Sudut dalam Radian) Pusat Titik Y Koordinat

Mentakrifkan Laluan SVG

Setelah mata diketahui, kita mencipta jalan itu sendiri. Ia harus bermula dan berakhir pada titik tengah bulatan (50,55) dan lukis garis ke titik pertama sebelum mencipta lengkok ke titik seterusnya. Berikut ialah contoh:

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

Membuat Pautan pada Segmen

Untuk menambah pautan pada segmen, anda boleh menetapkan atribut href pada setiap elemen dan tambah gaya CSS untuk menyesuaikan penampilannya.

Contoh untuk Kalangan Enam Segmen

Berikut ialah demo bulatan dengan enam segmen:

<svg viewbox="0 0 110 110">
  <path d="M55,55 L105,55 A50,50 0 0,1 80,98.30z" href="link1"></path>
  <path d="M55,55 L80,98.30 A50,50 0 0,1 30,98.30z" href="link2"></path>
  <path d="M55,55 L30,98.30 A50,50 0 0,1 5,55z" href="link3"></path>
  <path d="M55,55 L5,55 A50,50 0 0,1 30,11.69z" href="link4"></path>
  <path d="M55,55 L30,11.69 A50,50 0 0,1 80,11.69z" href="link5"></path>
  <path d="M55,55 L80,11.69 A50,50 0 0,1 105,55z" href="link6"></path>
</svg>

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