SVG在移动端可用，关键在于适配渲染机制：优先用CSS clip-path实现动效，压缩SVG复杂度，解耦动画与DOM更新，React Native中倾向ViewMask。
SVG在移动端不是不能用，而是要用对方式。卡顿、掉帧、白屏往往不是SVG本身的问题，而是实现细节没适配移动设备的渲染机制——比如过度依赖DOM操作、滥用滤镜、忽视图层合成策略。
优先用 CSS clip-path 做几何型遮罩
圆形展开、侧滑入场这类常见动效，别写 SVG
- 圆形扩散写法：
clip-path: circle(0 at 50% 50%) → circle(150vh at 50% 50%)，加will-change: clip-path提前提示渲染器 - 左右滑入用
clip-path: inset(0 100% 0 0) → inset(0 0 0 0)，比 SVG 矩形遮罩少一层 DOM 渲染开销 - 避免在
必须用 SVG 时，从源头压复杂度
不规则路径、文字镂空、双色蒙版等场景绕不开 SVG，那就控制输入和输出：路径越简、渲染越快。
- 用 SVGOMG 工具压缩
d属性，节点数控制在 200 以内；手动画的路径可先用 Potrace 转矢量再简化 - 加
shape-rendering="crispEdges"关闭抗锯齿，省去像素插值计算，边缘稍硬但流畅度明显提升 - 多个元素共用同一
，定义一次， <use href="#myMask"></use>复用，别每个都写全套标签 - 遮罩背景统一用纯色
fill="#000"，别用渐变或图案填充，纯色渲染路径最短
动画与 DOM 更新必须解耦
闪动、撕裂感常来自遮罩动画还没结束，新内容就已渲染。尤其在 React/Vue 中，DOM 挂载时机和动画节奏不同步是高频问题。
- 新内容提前挂载但设
visibility: hidden，监听animationend后再切为visible - 避免在动画中动态改
transform或r值——改用 CSS 自定义属性 +@keyframes驱动 - Android WebView 加
transform: translateZ(0)强制图层提升；iOS Safari 别用 SMIL，一律用 CSS 动画或requestAnimationFrame
React Native 场景选 ViewMask 不选 SvgMask
Copilot 等主流库提供两种方案，移动端应默认倾向 ViewMask。
- ViewMask 用四个 Animated.View 拼出镂空区域，纯原生视图操作，内存低、响应快，低端机也稳
- SvgMask 依赖 react-native-svg，路径走 JS 桥接 + Canvas 绘制，CPU 和桥接开销大，易掉帧
- 仅当需要圆角高亮、弧形边界等 ViewMask 难实现的形状时，才启用 SvgMask，且严格限制 path 复杂度（节点 ≤ 100）
不复杂但容易忽略：每次插入 SVG 前检查同 ID 元素是否已存在；销毁时清除定时器和事件监听。这些细节能把流畅度推到临界点之上。
