svg交互卡顿主因是重绘范围大、频率高；应缩小重绘区域（如用pointer-events: none隔离非交互层）、节流事件与动画帧、复用结构（defs/use、静态底图）、优先使用transform/opacity等轻量属性。
SVG交互卡顿，往往不是图形本身复杂，而是重绘范围太大、频率太高。真正有效的优化，是让浏览器只更新该更新的部分，且不反复折腾。
缩小重绘区域：用pointer-events: none隔离非交互层
很多SVG里包含装饰性元素（比如背景渐变、网格线、阴影轮廓），它们从不响应点击或拖拽，但默认仍参与事件捕获和样式计算。浏览器每次移动指针，都要遍历这些节点——哪怕没绑任何事件监听器。
- 把所有纯展示、无交互意图的
<path></path>、<rect></rect>、<g></g>统一加上pointer-events="none" - 只在真正需要响应操作的热区（如可拖拽节点、可点击图例）上保留
pointer-events="auto" - 避免在
<svg></svg>根节点设pointer-events，它会强制向下继承，反而干扰局部控制
限制重绘频率：节流绘制事件与动画帧
手写轨迹、实时图表缩放、拖拽调整等场景，事件触发密度远超渲染能力。连续调用setAttribute或修改d属性，会让浏览器来不及消化，直接丢帧。
- 对
touchmove或mousemove使用节流，例如每60ms最多处理一次（≈16fps下稳帧） - 动画类交互优先走
requestAnimationFrame，而非setTimeout或连续setState - React Native中，避免在
onPanResponderMove里直接更新SVG props；先缓存坐标，再在下一帧批量同步
复用结构，避免动态重建
每次交互都重新生成整个<svg></svg>或大量<path></path>，等于不断销毁再创建DOM节点，开销极大。
- 用
<defs></defs>+<use></use>复用图标、标记、箭头等高频元素，不重复定义几何数据 - 静态底图（如地图轮廓、坐标轴）抽成独立SVG，通过
<image></image>或SvgUri加载，不参与JS逻辑更新 - 在Web端，优先用CSS
transform平移/缩放容器，而不是重算每个子元素坐标
精简参与更新的属性
不是所有属性变化都会触发同等代价的重绘。有些改了立刻重排，有些只是重绘，有些甚至能进GPU图层免于主线程干预。
- 动画优先用
transform（translate/scale）和opacity，它们走合成层，不触发布局 - 避免在动画中频繁改
cx/cy、x/y、width/height，这些会强制重排 - 路径动画慎用
d属性全程替换；考虑stroke-dasharray+stroke-dashoffset做描边动画，更轻量
