如何使用 SVG 路徑建立可點擊的圓形選單？

建立邊框上帶有連結的圓圈

簡介

建立具有不同分段的可點擊圓圈可以增強使用者互動和視覺吸引力。在本文中，我們將探索如何使用 SVG 路徑元素來實現此目的，應用三角方程式來計算座標並繪製圓弧。

在圓上找點

到圍繞圓創建均勻的線段，我們需要計算沿其圓週的特定點的坐標。這可以使用三角方程式來完成：

X 座標= (半徑* Cos(以弧度表示的角度)) 中心X 座標

Y 座標

Y 座標= (半徑* Sin(角度以弧度表示)) Y座標中心

角度弧度=（角度角度* Math.PI / 180）

建構SVG 路徑

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

建構SVG 路徑

計算出點後，我們可以定義一個SVG 路徑來連接它們。路徑應從中心點開始和結束，繪製一條線到起點，畫一條弧到終點。

例如，要為具有6 段的圓建立路徑，我們將使用：

這裡，55,55代表中心點，使用半徑（50）、掃掠度（ 0）和旋轉角度定義圓弧形狀(1).具有 6段的圓的示範此範例 SVG 示範了一個具有 6 段的圓，每個段連結到不同的端點。

以上是如何使用 SVG 路徑建立可點擊的圓形選單？的詳細內容。更多資訊請關注PHP中文網其他相關文章！