SVG雷达图动态扫描效果核心是复用坐标系、仅驱动扫描线（射线或扇形）旋转动画，并通过透明度/描边/clipPath增强“扫过”感；声明式animate轻量但僵化，JS驱动灵活可交互；需注意stroke-width取偶数、transform-origin居中及IE兼容性。
SVG雷达图的动态扫描效果，核心在于用<animate>或JavaScript控制扫描线（通常是扇形或射线）绕中心旋转，并配合透明度、描边变化营造“扫描”感。关键不是重绘整个图，而是复用基础雷达坐标系，只驱动扫描元素动画。
扫描线的几何构造
雷达图通常基于极坐标，每个维度对应一个角度区间。扫描线可设计为：
- 一条从中心出发的射线：用
<line x1="cx" y1="cy" x2="x2" y2="y2">，通过改变x2/y2实现旋转； - 一个覆盖当前角度的小扇形（
<path d="M cx,cy L ... A ... Z">），更易叠加渐变或遮罩； - 配合
clipPath，让固定雷达多边形只在扫描扇区内可见，增强“光束扫过”的视觉反馈。
动画驱动方式选择
两种主流方式各有适用场景：
-
声明式SVG动画：用
<animate attributeName="transform" type="rotate" from="0" to="360" dur="3s" repeatCount="indefinite">，轻量、硬件加速好，但灵活性低，难响应数据更新； -
JavaScript驱动：用
requestAnimationFrame实时计算角度，更新transform或路径d属性，便于与交互（如暂停/加速/跳转角度）结合，也方便同步雷达数据高亮。
性能与兼容性要点
避免常见卡顿和错位问题：
立即学习“前端免费学习笔记（深入）”；
- 扫描线
stroke-width建议设为偶数值（如2px），减少抗锯齿抖动； - 使用
transform-origin: center确保旋转锚点精准落在雷达中心； - IE不支持
<animate>，需降级为JS方案或直接省略扫描效果； - 大量维度（如>20）时，扇形扫描比射线更耗GPU，可改用带模糊滤镜的细线+径向渐变模拟光束边缘。
数据联动示意（JS片段）
扫描到某维度时自动高亮其轴线和标签：
const angleStep = 360 / data.length;
let currentAngle = 0;
function animateScan() {
const idx = Math.floor(currentAngle / angleStep) % data.length;
highlightAxis(idx); // 如设置对应<line>的stroke="#3b82f6"
currentAngle += 0.5;
requestAnimationFrame(animateScan);
} 
