SVG实现H5移动端Loading动画更轻量可控，核心是精简结构（仅svg+circle/path）、用CSS动画替代SMIL、viewBox适配响应式、JS动态控制状态与性能优化。
在 H5 移动端中，用 SVG 实现 Loading 动画比用 GIF 或 CSS 动画更轻量、更可控、适配性更好。核心是利用 SVG 的矢量特性 + CSS 或 SMIL（或 JS）驱动动画，兼顾性能与视觉表现。
SVG 基础结构要精简，只保留必要元素
移动端对首屏渲染敏感，避免冗余标签。一个圆环加载动画只需 <svg></svg> + <circle></circle> 或 <path></path> 即可，不要嵌套 <g></g>、<defs></defs> 等非必需容器。
示例（环形旋转）：
<svg width="48" height="48" viewBox="0 0 48 48">
<circle cx="24" cy="24" r="20" fill="none" stroke="#007AFF" stroke-width="4" stroke-linecap="round">
<animate attributeName="stroke-dasharray" values="0,125.6;125.6,0" dur="1s" repeatCount="indefinite" />
</circle>
</svg>
注意：stroke-dasharray 控制虚线节奏，values 中的 125.6 是周长（≈2π×20），让圆环“画圈”产生流动感。
用 CSS @keyframes 替代 SMIL，兼容性更稳
iOS 早期 Safari 对 SMIL 支持差（iOS 10+ 已基本支持，但部分微信内置浏览器仍限制），推荐改用 CSS 动画控制 SVG 属性：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 给
<circle></circle>设置style="transform: rotate(0deg)"，再用@keyframes驱动transform - 用
stroke-dashoffset+stroke-dasharray模拟进度“绘制”，配合transition或@keyframes实现呼吸/旋转/描边效果 - 关键：SVG 元素需设
style="transform-origin: center"，否则旋转中心偏移
适配不同屏幕，用 viewBox + 百分比尺寸
不要写死 width="48px"，而是：
- 设置
viewBox="0 0 100 100"（便于比例计算） - 用 CSS 控制容器宽高，如
width: 1.5em; height: 1.5em;，SVG 自动等比缩放 - 所有坐标（
cx,cy,r）按 viewBox 比例写，比如cx="50"表示水平居中
这样在 iPhone 和安卓大屏上都能清晰显示，不会模糊或拉伸。
进阶技巧：用 JS 动态控制动画节奏和状态
需要“加载完成→消失”或“加载失败→抖动提示”，可用 JS 操作 SVG 元素类名或内联样式：
- 初始加
class="loading"，成功后换为class="loaded"，CSS 定义两套动画 - 用
el.style.animationPlayState = "paused"暂停动画（适合用户手动触发场景） - 结合
requestAnimationFrame做路径描摹动画（如绘制一个勾图标），比纯 CSS 更精准
小提醒：避免在 JS 中频繁修改 stroke-dashoffset——改用 CSS 变量（--dash-offset）+ style.setProperty，性能更好。
不复杂但容易忽略：确保 SVG 外层容器有明确宽高和 display: inline-block（防止行内默认对齐错位），动画就自然居中、不跳动了。
