应使用 CSS transform 替代修改 SVG 的 width/height 属性以避免重排，配合 viewBox 实现响应式缩放，并通过 <g> 批量变换、will-change 提升图层、移动端 GPU 加速等优化渲染性能。
直接修改 SVG 的 width 或 height 属性会触发浏览器重排（reflow），尤其在频繁动画或响应式缩放场景下，造成明显卡顿。根本解法不是“改尺寸”，而是“绕过尺寸变更”——用 CSS 变换替代 DOM 属性更新。
用 transform 代替 width/height 修改
SVG 元素本身支持 CSS transform，且 translate/scale 不触发 layout，只走合成层：
- 把缩放逻辑从
svg.setAttribute('width', w)改为给外层容器加transform: scale(1.5)，或对<g>组统一缩放 - 若需保持坐标系不变，配合
transform-origin: center和svg { width: 100%; height: 100% }+viewBox实现等比响应 - 避免对单个
<path>频繁设width/height—— 它们本不支持这些属性，强行设置无效还引发解析开销
确保 viewBox 存在并合理设置
没有 viewBox 的 SVG 在用 CSS 改宽高时极易退化为位图拉伸，间接加剧重绘压力：
- 所有动态 SVG 必须带
viewBox="0 0 [w] [h]"，数值与原始设计画布一致 - 移除行内的
width和height属性，交由 CSS 控制容器尺寸，让 viewBox 主导缩放行为 - 例如：
<svg viewBox="0 0 24 24" style="width: 1.5em; height: 1.5em">，这样缩放由 CSS 引擎处理，不进主线程 layout
批量操作与图层优化
当多个 SVG 同时缩放（如图表缩放、地图层级切换），需减少渲染管线负担：
- 用一个
<g>包裹全部可缩放内容，只对该<g>应用transform: scale()，而非遍历子元素 - 给 SVG 容器添加
will-change: transform（仅限持续动画的元素），提示浏览器提前升层 - 避免在缩放过程中同时修改
d、fill或滤镜 —— 这些会强制触发重绘甚至离屏渲染
移动端特别注意
iOS Safari 和 Android WebView 对重排更敏感，简单 resize 也可能掉帧：
- 禁用
zoom、transform: scale()混用；统一用scale3d(1, 1, 1)或translateZ(0)触发 GPU 加速 - 缩放动画用
requestAnimationFrame驱动，但只更新 transform，不读取 offsetWidth 等触发回流的属性 - 对不可见或暂不交互的 SVG，先设
visibility: hidden再缩放，完成后再恢复，防止隐藏期间仍参与布局计算
