如何使用链接的 SVG 路径段创建可点击的圆圈？-css教程-PHP中文网

如何使用链接的 SVG 路径段创建可点击的圆圈？

Susan Sarandon

发布： 2024-12-14 19:56:12

原创

555 人浏览过

How to Create a Clickable Circle with Linked SVG Path Segments?

创建具有链接边框线段的圆

在您寻求复制提供的具有可点击橙色边的圆时，很明显使用边框仅靠这一点是不够的。解决方案在于利用 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' />

登录后复制

在分段上创建链接

要向分段添加链接，您可以为每个分配一个 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 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>

登录后复制

以上是如何使用链接的 SVG 路径段创建可点击的圆圈？的详细内容。更多信息请关注PHP中文网其他相关文章！