Comment créer un menu circulaire cliquable avec des chemins SVG ?

Créer un cercle avec des liens sur sa bordure

Introduction

Créer un cercle cliquable avec des segments distincts peut améliorer l'interaction de l'utilisateur et l'attrait visuel. Dans cet article, nous explorerons comment y parvenir en utilisant des éléments de chemin SVG, en appliquant des équations trigonométriques pour calculer les coordonnées et dessiner des arcs.

Trouver des points sur un cercle

Pour Pour créer des segments égaux autour d'un cercle, nous devons calculer les coordonnées de points spécifiques le long de sa circonférence. Cela peut être fait à l'aide d'équations trigonométriques :

Coordonnée X = (Rayon * Cos(Angle en radians)) Coordonnée X du centre

Coordonnée Y = ( Rayon * Sin(Angle en Radians)) Coordonnée Y de Centre

Angle en Radians = (Angle en Degrés * Math.PI/180)

Construction du chemin SVG

Une fois les points calculés, nous pouvons définir un chemin SVG pour les relier. Le chemin doit commencer et se terminer au point central, en traçant une ligne jusqu'au point de départ et un arc jusqu'au point final.

Par exemple, pour créer un chemin pour un cercle avec 6 segments, nous utiliserions :

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

Ici, 55,55 représente le point central et la forme de l'arc est définie en utilisant le rayon (50), le degré de balayage (0) et l'angle de rotation. (1).

Démo d'un cercle à 6 segments

Cet exemple SVG illustre un cercle à 6 segments, chacun lié à un point final différent.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!