svg描边动画需用stroke-dasharray与stroke-dashoffset配合，先调用gettotallength()获取路径精确长度，再通过css动画控制偏移实现“一笔一划”效果；getbbox()仅返回包围盒尺寸，不适用。
SVG描边动画用 stroke-dasharray + stroke-dashoffset
直接改 stroke 颜色或透明度不是“画出来”，而是“闪出来”。真要模拟笔尖一笔一划画出路径，得靠 SVG 的描边虚线机制：用 stroke-dasharray 把整条路径切成“一段实线 + 无限长空白”，再用 stroke-dashoffset 控制起点偏移，配合 CSS 动画推着它“露出来”。
关键点是：路径总长度必须知道。浏览器不自动暴露这个值，得用 JS 调用 getTotalLength() 获取，硬写死数字会错位或截断。
- 先给 SVG 路径加个
id，比如<path id="my-path" d="M0,0 L100,100"></path> - JS 里取长度：
const len = document.getElementById('my-path').getTotalLength(); - CSS 里设初始状态：
stroke-dasharray: len;，stroke-dashoffset: len;（完全隐藏） - 动画终点设为
stroke-dashoffset: 0;
为什么 getBBox() 不行，getTotalLength() 才对
getBBox() 返回的是包围盒尺寸（宽高），和路径实际长度毫无关系；而 getTotalLength() 是 SVG 原生 API，精确计算贝塞尔曲线、弧线、折线的几何长度。哪怕路径含 C、A 指令，它也靠谱。
常见坑：在 DOM 尚未渲染完成时调用 getTotalLength()，返回 0。务必等 SVG 已插入文档且样式生效后执行——放在 window.addEventListener('load', ...) 或 requestAnimationFrame 里更稳。
- React 中建议在
useEffect里获取，且依赖项包含 SVG ref - Vue 中用
onMounted+nextTick确保渲染完成 - 纯 HTML 页面可把脚本放
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
