SVG雷达图核心是结构可维护、数据可更新、交互可感知、输出可复用；分网格、数据、标签、图例四层；用极坐标计算顶点，独立归一化各维度；通过语义属性和viewBox实现无障碍与响应式。
SVG 制作复杂的雷达图数据展示面板，核心不在“画得多花”，而在“结构可维护、数据可更新、交互可感知、输出可复用”。它适合需要打印、无障碍访问、高保真缩放或嵌入 PDF 的场景，但不适合高频动态刷新或复杂悬停逻辑。
结构分层：网格、数据、标签、图例四层分离
一个真正可用的 SVG 雷达图不是单个
-
网格层：用多个
绘制同心正多边形（如 20%、40%、60%、80%、100% 半径），每层设不同 stroke-opacity，不填色；也可用 + 搭配角度线模拟，更易调试 -
数据层：一个
连接归一化后的各维度顶点，fill 使用半透明色（如 fill="#3b82f620"），stroke 设为实色并加粗（如 stroke="#3b82f6"，stroke-width="2"） -
标签层：每个维度外侧放一个
元素，x/y 坐标由极坐标公式算出（x = cx + r * cos(θ)，y = cy + r * sin(θ)），配合 text-anchor="middle" 和 dominant-baseline="hanging" 对齐 -
图例层：独立于图表区域，用 或
包裹 color swatch + 文字，支持点击切换数据系列可见性（通过 toggle class 控制对应 的 opacity） 极坐标计算：统一中心 + 角度步长 + 归一化映射
所有坐标必须基于同一中心点（如 cx=200, cy=200），避免偏移失真。关键计算逻辑如下：
- 单轴角度 = 2 * Math.PI / 维度数（例如 6 维 → 每轴 60°）
- 第 i 个顶点角度 θᵢ = i × 单轴角度（i 从 0 开始）
- 数值归一化不能简单除以最大值：若维度量纲不同（如“代码行数”vs“文档页数”），需按维度各自 min/max 独立归一化，再映射到 [0, radius] 区间
- 坐标公式务必带中心偏移：x = cx + r × cos(θ)，y = cy + r × sin(θ)；注意 SVG y 轴向下，sin 结果无需取负（与数学坐标系一致）
交互与可访问性：靠语义标签，不靠 CSS hover
SVG 的优势在语义性，所以交互和无障碍要原生实现：
- 每个
数据层添加 role="region"、aria-label="编程: 4.2 分"、aria-valuenow="4.2"、aria-valuemin="0"、aria-valuemax="5" - 悬停效果用 CSS :hover 控制 stroke-width 和 opacity，不重绘路径；移动端用 focus-within 或 JS 监听 click 模拟
- 键盘导航支持：给
加 tabindex="0"，用 JS 监听 keydown 实现方向键切换高亮维度 - 动态更新时，清空旧
和 ，重新生成新节点并插入，避免 d 属性拼接错误；推荐封装 renderRadar(data, config) 函数
导出与响应式：用 viewBox + CSS 宽高控制缩放
确保图表在不同设备上清晰显示且能导出为矢量文件：
- SVG 根元素设 viewBox="0 0 400 400"，不设 width/height 属性；外部容器用 CSS 控制宽高（如 width: 100%; max-width: 500px; height: auto）
- 所有坐标、字体大小、stroke-width 都基于 viewBox 单位，不写 px；文字用 font-size="14"（单位隐含为 viewBox 坐标单位）
- 导出为 PNG 可用 canvg 库转译；导出为 SVG 直接 outerHTML 复制，保留全部语义和样式
- 打印适配：在 @media print 中设所有 stroke-width ≥ 1，fill-opacity 提升至 0.9，避免灰度下不可见
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
