SVG描边动画需用stroke-dasharray与stroke-dashoffset配合，先调用getTotalLength()获取路径精确长度，再通过CSS动画控制偏移实现“一笔一划”效果；getBBox()仅返回包围盒尺寸，不适用。
SVG描边动画用 stroke-dasharray + stroke-dashoffset
直接改 stroke 颜色或透明度不是“画出来”，而是“闪出来”。真要模拟笔尖一笔一划画出路径，得靠 SVG 的描边虚线机制：用 stroke-dasharray 把整条路径切成“一段实线 + 无限长空白”，再用 stroke-dashoffset 控制起点偏移，配合 CSS 动画推着它“露出来”。
关键点是：路径总长度必须知道。浏览器不自动暴露这个值，得用 JS 调用 getTotalLength() 获取，硬写死数字会错位或截断。
- 先给 SVG 路径加个
id，比如 - 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 页面可把脚本放
前
动画卡顿或跳变？检查 path 的 d 属性是否含多余空格/换行
SVG 解析器对 d 属性里的空白字符很敏感。如果路径数据像这样写：d="M 0 0\nL 100 100"，某些浏览器（尤其是旧版 Safari）可能算错 getTotalLength()，导致动画一开始猛跳或停在半路。
Sesame AI
一款开创性的语音AI伴侣，具备先进的自然对话能力和独特个性。
下载
解决方案很简单：压缩 d 字符串，去掉所有换行和多余空格，变成紧凑格式：d="M0,0L100,100"。可用正则 d.replace(/\s+/g, ' ').trim() 处理，或用在线工具预处理。
- Webpack/Vite 构建时可用
svg-sprite-loader或svgo自动优化 - 直接内联 SVG 时，手写就注意别换行
- 从设计软件导出 SVG 后，务必检查并清理
d属性
IE 和部分安卓 WebView 不支持 stroke-dashoffset 动画
CSS 动画 stroke-dashoffset 在 IE11 及更早版本中完全无效；很多 Android 4.x 的系统 WebView 也不认。这不是写法问题，是渲染引擎缺失支持。
兼容方案只有 JS 驱动：用 requestAnimationFrame 手动更新 stroke-dashoffset 值。虽然略重，但能兜底。别用 jQuery.animate() —— 它对 SVG 属性支持差，且已淘汰。
- 核心逻辑：起始 offset = 总长，目标 offset = 0，每帧减去一个步长
- 用
element.style.strokeDashoffset = currentOffset + 'px';设置（注意单位） - 别忘了清除动画帧，避免内存泄漏
CSS 让 SVG 描边“画出来”的本质，是骗过人眼：用虚线机制假装有一支笔在移动。真正难的不是写几行 CSS，而是确保长度准、路径净、环境兜得住。这些细节一漏，动画就废。