SVG <polygon>顶点坐标是相对于画布左上角的绝对坐标；正多边形顶点由中心(cx,cy)、半径r、边数n和起始角startAngle决定，第k个顶点为x=cx+r×cos(θ), y=cy+r×sin(θ)，其中θ=startAngle+k×2π/n。
SVG <polygon> 的顶点坐标是相对于 SVG 画布左上角（0,0）的绝对坐标，不是相对偏移，也不是极坐标；计算核心在于明确起点、边数、半径和旋转角度，再用三角函数逐个算出 x、y 值。
理解 polygon 的 points 属性格式
<polygon points="x1,y1 x2,y2 x3,y3 ..."/> 中每个 x,y 是一对以空格或逗号分隔的数字，单位为用户坐标（默认像素），所有点必须在同一坐标系下。浏览器不验证点是否构成闭合图形——<polygon> 会自动首尾连接，无需重复写第一个点。
正多边形顶点坐标的通用计算公式
假设要画一个 n 边正多边形，中心在 (cx, cy)，外接圆半径为 r，起始角为 startAngle（弧度，0 表示指向右方，逆时针增加）：
- 第 k 个顶点（k 从 0 开始）的角度为：
θ = startAngle + k × (2π / n) - 对应坐标为：
x = cx + r × cos(θ)，y = cy + r × sin(θ) - 注意：JavaScript 的
Math.cos/Math.sin使用弧度，不是角度；若用角度需先转：angleRad = angleDeg * Math.PI / 180
实际生成 points 字符串的 JavaScript 示例
例如画一个中心在 (100,100)、半径 60、5 条边、顶部朝上的正五边形（即起始角为 -π/2）：
立即学习“前端免费学习笔记（深入）”；
function regularPolygonPoints(cx, cy, r, n, startAngle = 0) {
const points = [];
const step = (Math.PI * 2) / n;
for (let i = 0; i < n; i++) {
const angle = startAngle + i * step;
const x = cx + r * Math.cos(angle);
const y = cy + r * Math.sin(angle);
points.push(`${x},${y}`);
}
return points.join(' ');
}
<p>// 顶部朝上：startAngle = -Math.PI / 2
const pts = regularPolygonPoints(100, 100, 60, 5, -Math.PI / 2);
// 结果类似："100,40 147.55,57.63 157.02,100 147.55,142.37 100,160"</p>将 pts 赋给 <polygon points="{{pts}}"> 即可渲染。
非正多边形或自定义路径的处理思路
如果顶点不规则，建议先在草图工具中标出各点相对于画布左上角的坐标，或用向量运算推导：
- 已知起点 A 和相邻点 B，想按固定边长和转向角延伸下一点 C：可用单位向量 + 旋转矩阵实现
- 涉及平移、缩放、旋转时，优先考虑用
<g transform="...">包裹<polygon>，而非重算所有坐标 - 调试技巧：临时添加
<circle cx="x" cy="y" r="2" fill="red"/>标出关键点，确认位置是否符合预期
