SVG响应式雷达图需用viewBox统一坐标系并动态计算顶点：设viewBox="0 0 200 200"，中心(100,100)，width="100%" height="auto"；顶点依极坐标转直角坐标生成，文字手动定位禁用rotate，resize时重算坐标更新属性。
SVG 实现响应式多边形雷达图，核心是**用 viewBox 统一坐标系 + 动态计算顶点 + 基于中心缩放**，而不是靠 CSS width/height 拉伸。直接设 width="100%" 会扭曲角度和文字，必须让所有几何元素（轴线、网格圆、多边形、标签）共享同一套极坐标逻辑，并随容器尺寸实时重算。
用 viewBox 锁定逻辑坐标系，不依赖 CSS 尺寸
给 <svg> 设置 viewBox="0 0 200 200"（中心在 100,100），再用 width="100%" height="auto" 让它响应式填充父容器。所有绘制都基于这个 200×200 的逻辑画布，缩放由浏览器自动完成，不会导致文字模糊或角度偏移。
别写：<svg width="100%" height="400px"> —— 这会让不同屏幕下像素密度错乱，
顶点坐标必须用极坐标转直角坐标动态生成
每个维度对应固定夹角：angle = i × 2π / N。半径 r 根据数据值归一化到 [0, 90]（留出 10 像素边距），再套公式：
立即学习“前端免费学习笔记（深入）”；
- x = centerX + r × cos(angle)
- y = centerY + r × sin(angle)
例如 5 维时，第 0 维角度为 0，第 1 维为 72° → 转成 72 * Math.PI / 180 再传入 cos/sin，不能硬编码 0.2π 或漏换算。
文字标签要手动定位，禁用 transform: rotate()
<text> 不能靠 transform: rotate() 对齐顶点——IE11 不支持，Safari 渲染模糊。正确做法是：
- 用 x/y 属性把文字锚点放在顶点正上方（如 x = vertexX, y = vertexY - 12）
- 设 text-anchor="middle" dominant-baseline="middle"
- 维度名用 <text>，分值用另一组 <text> 放在多边形顶点外侧（如 r + 16 处）
响应式重绘靠 resize 监听 + 重新生成 path 和 text
监听窗口或容器 resize 后，重新调用生成函数：
- 读取当前 svg.getBoundingClientRect() 宽高
- 按比例重算 centerX = width/2, centerY = height/2
- 重算所有顶点坐标，更新 <polygon> 的 d 属性或 points 属性
- 批量替换所有 <text> 的 x/y 属性（不要删 DOM，只改属性）
避免用 getBBox() 测文字宽高做自适应——性能差且不可靠；固定字号（如 12px），靠 viewBox 缩放保持清晰。
