如何制作一个边缘分为 3 部分的 svg 圆？答案

【问题标题】：How to make an svg circle with edge divided into 3 parts?如何制作一个边缘分为 3 部分的 svg 圆？
【发布时间】：2023-02-15 19:15:55
【问题描述】：

我正在尝试创建一个只有边缘的圆，分为 3 个部分。

我的尝试结果：

不太好，我想要做的是让这 3 个部分聚在一起形成一个圆的边缘，同时在每个部分之间留出一些空间（正如您在左侧看到的那样，该间隙应该是这样的）

我正在使用带有 3 个路径的 svg 来执行此操作：

  <svg viewBox="0 0 100 100">
    <linearGradient id="gradient" x1="0" y1="0" x2="0" y2="100%">
      <stop offset="0%" stop-color="#56c4fb" />
      <stop offset="100%" stop-color="#0baeff" />
    </linearGradient>
    <path className="grey" d="M50,90 A30,25 0 0,1 10,90" fill="none" />
    <path className="grey" d="M5,80 A30,25 0 0,1 20,50" fill="none" />
    <path className="grey" d="M50,50 A30,25 0 0,1 80,90" fill="none" />
  </svg>

为了创建不同的路径，在这种情况下是否需要手动计算？对我来说复杂的是必须考虑每个部分之间的小间隙（正如您在左侧看到的间隙，这就是应该如何绘制）

计算 3 条路径的坐标的最简单方法是什么，因此它们由 3 个 prats 形成一个圆圈，它们之间的间隙很小？

【问题讨论】：

标签： css svg

【解决方案1】：

如果要创建一个圆，其边被分成三个相等的部分，并且它们之间的间隙很小，一种方法是使用三角学来计算每条路径端点的坐标。

您的代码将如下所示：

<svg viewBox="0 0 100 100">
  <linearGradient id="gradient" x1="0" y1="0" x2="0" y2="100%">
    <stop offset="0%" stop-color="#56c4fb" />
    <stop offset="100%" stop-color="#0baeff" />
  </linearGradient>
  <path class="grey" d="M50,10 A40,40 0 0,1 92.59,46.18" fill="none" />
  <path class="grey" d="M92.59,46.18 A40,40 0 0,1 7.41,46.18" fill="none" />
  <path class="grey" d="M7.41,46.18 A40,40 0 0,1 50,10" fill="none" />
</svg>

【讨论】：