必须先用 getTotalLength() 获取真实路径长度，否则动画会卡在半路或不播放；因 SVG 元素未完成布局（如 display: none 或未插入文档）时该方法返回 0，属规范行为，依赖渲染上下文，需等 DOMContentLoaded 后加 requestAnimationFrame 确保绘制就绪。
必须先用 getTotalLength() 拿到真实路径长度，否则动画一定卡在半路或直接不播。
为什么 getTotalLength() 不能早于渲染执行
SVG 元素若未完成布局（比如还在 DOM 树里但没被插入文档、或父容器 display: none），调用 getTotalLength() 会返回 0。这不是 bug，是规范行为——长度依赖于坐标系和 stroke-width 等渲染上下文。
- 推荐监听
DOMContentLoaded，再加一层requestAnimationFrame确保绘制就绪 - 开发中可临时在控制台选中
<path></path>后执行$0.getTotalLength()快速验证 - 别用
getBBox().width或手算d字符串来估算长度——贝塞尔曲线、弧线的几何长度无法靠坐标差推导
CSS 动画写法：stroke-dasharray 和 stroke-dashoffset 怎么配
核心逻辑是：把整条路径“伪装”成一条超长虚线，再通过移动虚线起始点让它逐步显现。
-
stroke-dasharray设为单值L（即路径真实长度），等效于L, L，形成一条“全实线+全空白”的循环模式 -
stroke-dashoffset初始设为L，此时实线段完全偏移出视野，路径不可见 - 动画终点设
stroke-dashoffset: 0，实线段从头开始显露，视觉即“绘制完成” - 记得加
fill="none"，否则填充色会盖住描边动画
用 @keyframes 还是 transition？
取决于是否需要“播完即停、下次点击重播”。两者行为差异很大：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
-
transition方案依赖 class 切换：path.classList.add('drawn')触发动画，但移除 class 时会倒放——不适合按钮反复触发 -
@keyframes+animation-fill-mode: forwards能确保停在终点，且支持animation-play-state: paused暂停控制 - 时间建议 0.4–0.8s；缓动用
ease-out比linear更接近手绘收尾感 - 响应式场景下，若 SVG 尺寸变化，需监听
resize并重新计算长度、重设 CSS 变量
路径变形动画（d 属性补间）的硬性前提
想让一个图标从「播放」变成「暂停」并平滑过渡，d 值必须严格对齐，否则浏览器直接跳变。
- 两个
<path></path>的d字符串，命令数量、类型（M/L/C/Z）、顺序必须完全一致 - 不要混用大写绝对坐标和小写相对坐标；统一闭合（都带
Z或都不带） - 可用工具如 SVGOMG 归一化路径，或手动拆分
d字符串，按空格/逗号切开后逐项比对命令字母和参数个数 - 如果涉及
stroke-width、fill或stroke-dashoffset变化，这些属性也得显式加入transition
最容易被忽略的是：动画生效前，路径是否真的已渲染、长度是否准确、d 结构是否兼容——这三个点任一出错，动画都不会按预期运行，且错误现象高度相似（不动、闪一下、跳变），必须逐项排查。
