Wie erstelle ich einen anklickbaren Kreis mit verknüpften SVG-Pfadsegmenten?

Erstellen eines Kreises mit verknüpften Randsegmenten

Bei Ihrer Suche, den bereitgestellten Kreis mit anklickbaren orangefarbenen Seiten zu replizieren, wird deutlich, dass die Verwendung von Rändern allein wird nicht ausreichen. Die Lösung besteht darin, SVG-Pfade und Trigonometrie zu nutzen, um die Koordinaten zu generieren, die die Segmente des Kreises definieren.

Punkte auf dem Kreis berechnen

Um die Koordinaten für die Segmente zu finden , verwenden wir trigonometrische Gleichungen basierend auf der Anzahl der gewünschten Segmente. Um beispielsweise einen Kreis mit sechs Segmenten zu erstellen, teilen wir 360 Grad durch 6, was zu 60-Grad-Segmenten führt.

Von hier aus können die X- und Y-Koordinaten jedes Punkts mithilfe der folgenden Gleichungen abgeleitet werden:

• X-Koordinate = Radius * Cos (Winkel im Bogenmaß) Mittelpunkt X-Koordinate
• Y-Koordinate = Radius * Sin (Winkel im Bogenmaß) Mittelpunkt Y-Koordinate

SVG-Pfad definieren

Sobald die Punkte bekannt sind, erstellen wir den Pfad selbst. Es sollte am Mittelpunkt des Kreises (50,55) beginnen und enden und eine Linie zum ersten Punkt zeichnen, bevor ein Bogen zum nächsten Punkt erstellt wird. Hier ist ein Beispiel:

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

Links zu Segmenten erstellen

Um Links zu den Segmenten hinzuzufügen, können Sie jedem ein href-Attribut zuweisen. Element und fügen Sie CSS-Stile hinzu, um ihr Erscheinungsbild anzupassen.

Beispiel für einen Kreis mit sechs Segmenten

Hier ist eine Demo eines Kreises mit sechs Segmenten:

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

Das obige ist der detaillierte Inhalt vonWie erstelle ich einen anklickbaren Kreis mit verknüpften SVG-Pfadsegmenten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!