svg线条动态描边动画需用stroke-dasharray和stroke-dashoffset配合javascript动态获取路径长度，设stroke为可见色、fill为none，通过css过渡或requestanimationframe实现平滑生长效果。
用 SVG 实现线条路径的动态描边生长动画，核心是利用 stroke-dasharray 和 stroke-dashoffset 两个属性配合 JavaScript 动态计算路径长度，制造“从头画到尾”的视觉效果。不依赖第三方库，纯 HTML5 + SVG 即可完成，兼容性好、性能轻量。
确保路径基础样式正确
描边动画的前提是路径必须有可见描边且无填充：
- 必须设置
stroke（如stroke="#3498db"）和stroke-width -
fill必须为"none"，否则填充会盖住描边动画 - 推荐使用
<path></path>或<polyline></polyline>，避免用<circle></circle>等默认填充的元素 - 若路径由外部 SVG 引入（如
<use></use>），需等加载完成再调用长度计算
动态获取并设置虚线参数
不能硬编码长度值，否则响应式缩放或不同路径下会失效：
- 用 JavaScript 调用
pathEl.getTotalLength()获取真实像素长度 - 设
stroke-dasharray为len, len（第一个值是实线长，第二个是空白长；设成相等可确保只显示一段实线） - 初始
stroke-dashoffset设为len，让整条线完全“隐藏”在起点之外 - 可将长度存为 CSS 自定义属性，便于后续 CSS 动画引用：
pathEl.style.setProperty('--path-len', len)
用 CSS 过渡或 JS 逐帧驱动动画
两种方式都可行，按需选择：
-
CSS transition 方式：给路径添加 class 触发变化，例如
path.classList.add('drawn')，CSS 中定义transition: stroke-dashoffset 0.6s ease-out，终点stroke-dashoffset: 0 -
JavaScript requestAnimationFrame 方式：适合需要精确控制节奏、暂停/重播或配合其他动画逻辑的场景，每帧递减
stroke-dashoffset值直到为 0 - 动画时长建议 0.4–0.8 秒，过短显得突兀，过长易让用户等待
注意常见翻车点
很多动画不生效，往往卡在这几个细节上：
- DOM 尚未渲染完成就调用
getTotalLength()→ 返回 0；应监听DOMContentLoaded或svg.onload - 忘了显式设置初始
stroke-dashoffset，导致第一帧直接显示整条线，动画“闪一下”才开始 - SVG 宽高或
viewBox变化后路径长度改变，但 CSS 里写的死值没更新 → 动画变快、卡顿或只画一半 - 用
animateMotion或直接对d属性做 CSS 动画 → 不支持过渡，浏览器不识别
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
