svg响应式雷达图需用viewbox统一坐标系并动态计算顶点：设viewbox="0 0 200 200"，中心(100,100)，width="100%" height="auto"；顶点依极坐标转直角坐标生成，文字手动定位禁用rotate，resize时重算坐标更新属性。

SVG 实现响应式多边形雷达图，核心是**用 viewBox 统一坐标系 + 动态计算顶点 + 基于中心缩放**，而不是靠 CSS width/height 拉伸。直接设 width="100%" 会扭曲角度和文字，必须让所有几何元素（轴线、网格圆、多边形、标签）共享同一套极坐标逻辑，并随容器尺寸实时重算。

用 viewBox 锁定逻辑坐标系，不依赖 CSS 尺寸

给 设置 viewBox="0 0 200 200"（中心在 100,100），再用 width="100%" height="auto" 让它响应式填充父容器。所有绘制都基于这个 200×200 的逻辑画布，缩放由浏览器自动完成，不会导致文字模糊或角度偏移。

别写： —— 这会让不同屏幕下像素密度错乱，旋转后在 Safari 中漂移。

顶点坐标必须用极坐标转直角坐标动态生成

每个维度对应固定夹角：angle = i × 2π / N。半径 r 根据数据值归一化到 [0, 90]（留出 10 像素边距），再套公式：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 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()

不能靠 transform: rotate() 对齐顶点——IE11 不支持，Safari 渲染模糊。正确做法是：

• 用 x/y 属性把文字锚点放在顶点正上方（如 x = vertexX, y = vertexY - 12）
• 设 text-anchor="middle" dominant-baseline="middle"
• 维度名用 ，分值用另一组 放在多边形顶点外侧（如 r + 16 处）

响应式重绘靠 resize 监听 + 重新生成 path 和 text

监听窗口或容器 resize 后，重新调用生成函数：

• 读取当前 svg.getBoundingClientRect() 宽高
• 按比例重算 centerX = width/2, centerY = height/2
• 重算所有顶点坐标，更新 的 d 属性或 points 属性
• 批量替换所有 的 x/y 属性（不要删 DOM，只改属性）

避免用 getBBox() 测文字宽高做自适应——性能差且不可靠；固定字号（如 12px），靠 viewBox 缩放保持清晰。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！