Comment créer un cercle cliquable avec des segments de chemin SVG liés ?

Création d'un cercle avec des segments de bordure liés

Dans votre quête pour reproduire le cercle fourni avec des côtés orange cliquables, il devient évident que l'utilisation de bordures seul ne suffira pas. La solution réside dans l'utilisation des chemins SVG et de la trigonométrie pour générer les coordonnées qui définiront les segments du cercle.

Calcul des points sur le cercle

Pour trouver les coordonnées des segments , nous employons des équations trigonométriques basées sur le nombre de segments souhaités. Par exemple, pour créer un cercle avec six segments, nous divisons 360 degrés par 6, ce qui donne des segments de 60 degrés.

À partir de là, les coordonnées X et Y de chaque point peuvent être dérivées à l'aide des équations suivantes :

• Coordonnée X = Rayon * Cos (angle en radians) Coordonnée X du point central
• Coordonnée Y = Rayon * Coordonnée Y du point central Sin (Angle en radians)

Définition du chemin SVG

Une fois les points connus, nous construisons le chemin lui-même. Il doit commencer et se terminer au point central du cercle (50,55) et tracer une ligne jusqu'au premier point avant de créer un arc jusqu'au point suivant. Voici un exemple :

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

Création de liens sur des segments

Pour ajouter des liens vers les segments, vous pouvez attribuer un attribut href à chaque élément et ajoutez des styles CSS pour personnaliser leur apparence.

Exemple pour un cercle à six segments

Voici une démo d'un cercle à six segments :

<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>

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!