Wie erstelle ich ein anklickbares kreisförmiges Menü mit SVG-Pfaden?

Erstellen eines Kreises mit Links am Rand

Einführung

Das Erstellen eines anklickbaren Kreises mit unterschiedlichen Segmenten kann die Benutzerinteraktion verbessern und optischer Reiz. In diesem Artikel werden wir untersuchen, wie wir dies mithilfe von SVG-Pfadelementen erreichen können, indem wir trigonometrische Gleichungen anwenden, um Koordinaten zu berechnen und Bögen zu zeichnen.

Punkte auf einem Kreis finden

Zu Um gleichmäßige Segmente um einen Kreis zu erstellen, müssen wir die Koordinaten bestimmter Punkte entlang seines Umfangs berechnen. Dies kann mithilfe trigonometrischer Gleichungen erfolgen:

X-Koordinate = (Radius * Cos(Winkel im Bogenmaß)) X-Koordinate des Mittelpunkts

Y-Koordinate = ( Radius * Sin(Winkel im Bogenmaß)) Y-Koordinate des Mittelpunkts

Winkel in Bogenmaß = (Winkel in Grad * Math.PI / 180)

Konstruieren des SVG-Pfads

Sobald die Punkte berechnet sind, können wir einen SVG-Pfad definieren um sie zu verbinden. Der Pfad sollte am Mittelpunkt beginnen und enden und eine Linie zum Startpunkt und einen Bogen zum Endpunkt zeichnen.

Um beispielsweise einen Pfad für einen Kreis mit 6 Segmenten zu erstellen, würden wir Folgendes verwenden:

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

Hier stellt 55,55 den Mittelpunkt dar und die Bogenform wird mithilfe des Radius (50), des Sweep-Grades (0) und des Drehwinkels definiert (1).

Demo eines Kreises mit 6 Segmenten

Dieses Beispiel-SVG zeigt einen Kreis mit 6 Segmenten, die jeweils mit einem anderen Endpunkt verknüpft sind.

Das obige ist der detaillierte Inhalt vonWie erstelle ich ein anklickbares kreisförmiges Menü mit SVG-Pfaden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!