svg饼图扇形路径本质是用a命令绘制圆弧再直线闭合，关键在于将百分比转为起始/终止角并映射到svg坐标系：起始角-90°（顶部），顺时针延伸，角度转弧度后用cos/sin算端点坐标，再按m l a z格式生成d属性。
SVG 饼图扇形的路径（d 属性）本质是用 A（椭圆弧）命令绘制两点之间的圆弧段，再配合直线闭合。关键不在“画圆”，而在于：**如何根据百分比算出起始角和终止角，并把它们转成 SVG 坐标系下的起点、终点坐标**。这需要三角函数，但逻辑清晰，不难掌握。
理解 SVG 坐标系与角度方向
SVG 的 (0,0) 在左上角，Y 轴向下为正；而数学极坐标中 Y 轴向上为正，且 0° 通常指向右（X 正方向）。饼图习惯从顶部（12 点钟方向）开始顺时针展开，因此需做两步映射：
- 将数据百分比 → 归一化为 [0, 1)，再 × 360° 得到总圆心角；
- 起始角设为 -90°（即数学 0° 对应 SVG 的顶部），后续每一段都从上一段终点继续顺时针延伸；
- 所有角度统一转为弧度（JavaScript 中
Math.sin/cos只接受弧度）。
计算扇形两端点坐标的公式
假设饼图圆心在 (cx, cy)，半径为 r，起始弧度为 startRad，终止弧度为 endRad，则：
- 起点：
x1 = cx + r * Math.cos(startRad)，y1 = cy + r * Math.sin(startRad) - 终点：
x2 = cx + r * Math.cos(endRad)，y2 = cy + r * Math.sin(endRad)
注意：因为 SVG Y 向下为正，而 Math.sin 在标准数学中对“上为正”定义，所以这里直接使用即可——因为我们已把 0 弧度对应到 SVG 的顶部（-90° 数学角 → -π/2 弧度），sin(-π/2) = -1，y = cy + r*(-1) = cy - r，正好是上方点，符合预期。
拼出 SVG path 的 d 属性值
一个扇形路径由三部分组成：移动到圆心 → 画弧到终点 → 直线回圆心闭合。但更高效常用的是“外轮廓法”：只画外圆弧+两条半径线（或用 A + L + Z）。标准写法如下：
M cx,cy L x1,y1 A r,r 0 largeFlag,1 x2,y2 Z-
largeFlag：当圆心角 ≤ 180° 时为0，否则为1（决定走长弧还是短弧）； - 注意
A命令中两个半径都填r（圆形，非椭圆）；第四个参数（x-axis-rotation）填0； - 顺时针绘图对应
sweep-flag = 1（SVG 规范中 1 表示正向，即顺时针）。
完整计算示例（JavaScript 片段）
以占比 30% 的扇形为例（圆心 200,200，半径 150）：
- 总角度 = 0.3 × 360 = 108° → 弧度 =
108 * Math.PI / 180 ≈ 1.884； - 起始弧度 =
-Math.PI/2（即 -90°，顶部）； - 终止弧度 =
-Math.PI/2 + 1.884 ≈ 0.314（约 18°，指向右上方）； - 起点：
x1=200+150×cos(-1.571)=200,y1=200+150×sin(-1.571)=50； - 终点：
x2≈200+150×cos(0.314)≈345,y2≈200+150×sin(0.314)≈247； -
largeFlag = 0（108°M200,200 L200,50 A150,150 0 0,1 345,247 Z
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
