H5中用原生SVG+JS实现点阵连线与雷达扫描图表：一、点阵用<circle>定位、<path>高效连线并支持点击高亮；二、雷达扫描用<line>模拟旋转臂、<path>弧指令绘制扇形残留；三、联动时每帧计算角度差触发点响应；四、优化上避免过多SVG节点，超200点改用canvas，锁定30–45fps。
在 H5 页面中用 SVG 实现点阵连线与雷达扫描图表，核心是利用 SVG 的 <circle>、<line>、<path> 和 <animateTransform>（或 requestAnimationFrame + 动态更新）来绘制静态结构与动态效果。不需要引入大型图表库，纯原生 SVG + JS 即可高效实现，兼顾性能与定制性。
一、点阵连线图：定位 + 连线 + 交互
点阵指一组有坐标的离散点，连线则按规则（如邻近、顺序、权重）连接它们。
- 用
<circle>绘制每个点，通过cx/cy设置坐标，r控制大小，fill设颜色 - 用
<line>或<path d="M x1 y1 L x2 y2">连接两点；若连线较多，推荐<path>合并为单路径提升渲染效率 - 支持点击高亮：给每个
<circle>绑定onclick，动态修改其fill或添加<circle r="8" fill="none" stroke="#00aaff" stroke-width="2">作为选中环 - 示例坐标可来自数组：
const points = [{x: 100, y: 150}, {x: 200, y: 80}, ...]，JS 遍历生成 SVG 元素
二、雷达扫描动画：旋转射线 + 扇形渐显
雷达扫描效果本质是一条从中心向外扫过的亮线（扫描臂），配合半透明扇形区域模拟“刚扫描过”的视觉残留。
- 中心点设为
(cx, cy)（如 200,200），扫描半径r固定（如 180） - 用
<line x1="cx" y1="cy" x2="..." y2="...">表示扫描臂，通过 JS 每帧更新x2/y2：x2 = cx + r * Math.cos(angle); y2 = cy + r * Math.sin(angle); - 叠加一个扇形遮罩（
<path>）表现“已扫描区域”：用 SVG 弧指令A rx ry x-axis-rotation large-arc-flag sweep-flag x y构建动态扇形路径，sweep-flag 控制顺时针/逆时针填充 - 用
requestAnimationFrame驱动角度匀速递增（如angle += 0.02），比 CSS@keyframes更易控制节奏和暂停
三、融合技巧：点阵 + 雷达扫描联动
让点阵响应雷达扫描——例如扫描臂经过某点时触发高亮或显示标签。
- 每帧计算扫描臂当前角度
θ，对每个点计算其相对于中心的极角atan2(dy, dx) - 设定容忍角度范围（如 ±5°），若
|pointAngle - currentAngle| < tolerance，则激活该点样式或显示 tooltip - 为避免频繁重绘，只对“进入/离开扫描区”的点做状态切换，而非每帧全量更新所有点的 DOM 属性
- 可叠加淡入动画：用
opacity或fill-opacity配合 CSS transition，让高亮更柔和
四、优化与兼容提示
H5 场景需兼顾低端安卓机性能与微信/QQ 内置浏览器兼容性。
- 避免在 SVG 中大量使用
<animate>标签（部分安卓 WebView 支持弱），优先用 JS +transform或直接改属性 - 点阵数量超 200 个时，考虑用
<canvas>替代 SVG 渲染（SVG DOM 节点过多会卡顿），但连线逻辑仍可用 SVG 思路建模 - 设置
viewBox="0 0 400 400"保证缩放适配，配合 CSSwidth: 100%; height: auto;响应式布局 - 雷达扫描建议帧率锁定在 30–45fps（
angle += 0.015左右），比 60fps 更省电且观感无差别
