如何用SVG将圆形等分为12个扇形？

一、6等分轮盘代码原理拆解 #

1. SVG基础设置 #

• SVG的viewBox="-2 -2 202 203"定义了画布坐标范围，轮盘中心为(100,100)，外半径为100。
• 扇形填充色由.frag类控制，中心圆形由.center类控制。

2. 扇形绘制核心逻辑（path指令） #

每个扇形是中心出发的直线+圆弧+自动闭合的路径，以第一个扇形为例：

<path class="frag" d="M100,100 v-100 a100,100 1 0,1 86.6025,50" />

• M100,100：移动到轮盘中心；
• v-100：垂直向上画直线到(100, 0)（对应0°方向）；
• a100,100 1 0,1 86.6025,50：绘制圆弧，参数含义：
  • 100,100：圆弧的x/y半径（正圆，所以值相等）；
  • 1：x轴旋转角度（不影响正圆）；
  • 0：小弧标志（扇形角度60°<180°）；
  • 1：顺时针扫掠；
  • 86.6025,50：相对于当前点(100,0)的偏移，最终到达60°方向的边缘点(186.6025,50)。
• SVG填充路径时会自动将圆弧终点与起点(100,100)连接，形成闭合扇形。

3. 6等分的核心计算 #

6等分每个扇形圆心角为360°/6=60°，代码中86.6025是100*cos(30°)，50是100*sin(30°)，这两个值对应60°方向的坐标偏移，确保每个扇形覆盖60°范围，6个扇形刚好填满360°。

二、改造为12等分轮盘的步骤 #

1. 角度与坐标计算 #

12等分每个扇形圆心角为360°/12=30°，基于SVG坐标系（y轴向下，角度顺时针递增），角度θ对应的边缘点坐标：

x = 100 + 100*sin(θ)
y = 100 - 100*cos(θ)

常用30°间隔的坐标偏移：

• 30°：dx=50，dy≈13.3975
• 60°：dx≈86.6025，dy=50
• ...以此类推。

2. 调整path指令 #

每个扇形对应30°范围，以0°-30°的扇形为例，path改为：

<path class="frag" d="M100,100 v-100 a100,100 0 0,1 50,13.3975" />

• 圆弧终点偏移改为50,13.3975，对应30°方向边缘点；
• 大弧标志设为0（30°<180°），保持顺时针扫掠1。

3. 优化文本位置 #

文本放在扇形中间角度（如0°-30°的中间是15°），取距离中心约70的位置：

x = 100 + 70*sin(θ_mid)
y = 100 - 70*cos(θ_mid)

比如15°对应的文本坐标约为(118, 32)。

4. 完整12等分轮盘代码 #

.frag {
  fill: orange;
}

.center {
  fill: tomato;
}

<svg width="500" height="500" viewBox="-2 -2 202 203" shape-rendering="geometricPrecision">
  <!-- 扇形1：0°-30° -->
  <a xlink:href="#">
    <path class="frag" d="M100,100 v-100 a100,100 0 0,1 50,13.3975" />
    <text x="118" y="32" text-anchor="middle">1</text>
  </a>
  <!-- 扇形2：30°-60° -->
  <a xlink:href="#">
    <path class="frag" d="M100,100 l50,-86.6025 a100,100 0 0,1 36.6025,36.6025" />
    <text x="155" y="45" text-anchor="middle">2</text>
  </a>
  <!-- 扇形3：60°-90° -->
  <a xlink:href="#">
    <path class="frag" d="M100,100 l86.6025,-50 a100,100 0 0,1 0,50" />
    <text x="175" y="75" text-anchor="middle">3</text>
  </a>
  <!-- 扇形4：90°-120° -->
  <a xlink:href="#">
    <path class="frag" d="M100,100 h100 a100,100 0 0,1 -36.6025,36.6025" />
    <text x="175" y="125" text-anchor="middle">4</text>
  </a>
  <!-- 扇形5：120°-150° -->
  <a xlink:href="#">
    <path class="frag" d="M100,100 l86.6025,50 a100,100 0 0,1 -36.6025,36.6025" />
    <text x="155" y="155" text-anchor="middle">5</text>
  </a>
  <!-- 扇形6：150°-180° -->
  <a xlink:href="#">
    <path class="frag" d="M100,100 l50,86.6025 a100,100 0 0,1 -50,13.3975" />
    <text x="118" y="168" text-anchor="middle">6</text>
  </a>
  <!-- 扇形7：180°-210° -->
  <a xlink:href="#">
    <path class="frag" d="M100,100 v100 a100,100 0 0,1 -50,-13.3975" />
    <text x="82" y="168" text-anchor="middle">7</text>
  </a>
  <!-- 扇形8：210°-240° -->
  <a xlink:href="#">
    <path class="frag" d="M100,100 l-50,86.6025 a100,100 0 0,1 -36.6025,-36.6025" />
    <text x="45" y="155" text-anchor="middle">8</text>
  </a>
  <!-- 扇形9：240°-270° -->
  <a xlink:href="#">
    <path class="frag" d="M100,100 l-86.6025,50 a100,100 0 0,1 0,-50" />
    <text x="25" y="125" text-anchor="middle">9</text>
  </a>
  <!-- 扇形10：270°-300° -->
  <a xlink:href="#">
    <path class="frag" d="M100,100 h-100 a100,100 0 0,1 36.6025,-36.6025" />
    <text x="25" y="75" text-anchor="middle">10</text>
  </a>
  <!-- 扇形11：300°-330° -->
  <a xlink:href="#">
    <path class="frag" d="M100,100 l-86.6025,-50 a100,100 0 0,1 36.6025,-36.6025" />
    <text x="45" y="45" text-anchor="middle">11</text>
  </a>
  <!-- 扇形12：330°-360° -->
  <a xlink:href="#">
    <path class="frag" d="M100,100 l-50,-86.6025 a100,100 0 0,1 50,-13.3975" />
    <text x="82" y="32" text-anchor="middle">12</text>
  </a>
  <!-- 中心圆 -->
  <a xlink:href="#">
    <path class="center" d="M100,100 m0,-50 a50,50 0 1,1 0,100 a50,50 0 1,1 0,-100" />
  </a>
</svg>

额外优化建议 #

• 用SVG的<g>标签分组管理扇形，方便统一样式或变换；
• 结合JavaScript循环计算角度和坐标，减少重复代码；
• 中心圆的path可简化为d="M100,100 m0,-50 a50,50 0 1,1 0,100"，SVG会自动闭合路径。

内容的提问来源于stack exchange，提问作者user23613614