如何使用链接的 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中文网其他相关文章！