首页 >web前端 >css教程 >如何使用链接的 SVG 路径段创建可点击的圆圈?

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

Susan Sarandon
Susan Sarandon原创
2024-12-14 19:56:12557浏览

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中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn