如何使用連結的 SVG 路徑段建立可點擊的圓圈？

建立具有連結邊框線段的圓

在您尋求複製提供的具有可點擊橙色邊的圓時，很明顯使用邊框僅靠這一點是不夠的。解決方案在於利用 SVG 路徑和三角學來產生定義圓線段的座標。

計算圓上的點

找出線段的座標，我們根據所需的線段數量採用三角方程式。例如，要建立一個具有六段的圓，我們將 360 度除以 6，得到 60 度段。

從這裡，可以使用以下等式導出每個點的X 和Y 座標：

• X 座標= 半徑* Cos(角度弧度) 中心點X 座標
• Y 座標= 半徑* Sin（以弧度表示的角度） 中心點 Y座標

定義 SVG 路徑

一旦知道了點，我們就可以製作路徑本身。它應該在圓的中心點 (50,55) 處開始和結束，並在創建到下一個點的圓弧之前繪製一條到第一個點的線。下面是一個範例：

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

在分段上建立連結

要向分段添加鏈接，您可以為每個 分配一個href屬性。元素並添加 CSS 樣式來自訂其外觀。

六段圓的例子

以下是六段圓的示範：

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

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