必须用 svg 的 元素实现描边动画，核心是将文字轮廓转为可计算长度的路径；需设 fill: none、显式声明 stroke，用 gettotallength() 获取真实路径长，再通过 stroke-dasharray 和 stroke-dashoffset 配合 css 动画从隐藏到完全显示，并加 animation-fill-mode: forwards 保持最终状态。
SVG 元素怎么加描边动画
必须用 SVG 的 <text></text>，HTML 普通文本不支持 stroke-dasharray 和 stroke-dashoffset 动画。核心逻辑是：把文字轮廓当路径，用描边“画出来”。
关键步骤：
-
fill: transparent或fill: none—— 否则描边会被填充盖住 -
stroke: #000+stroke-width: 2—— 描边必须显式声明，不能靠继承 - 用 JS 调用
textElement.getTotalLength()获取真实路径长度（不是字符串长度） - 设
stroke-dasharray= 总长，stroke-dashoffset= 总长 → 初始不可见 - CSS 动画只驱动
stroke-dashoffset从总长 → 0
为什么 stroke-dashoffset 动画会跳变或不动
常见错误不是写错语法，而是初始状态没对齐渲染管线。
典型现象和修复点：
- 第一帧闪一下再动 → 没在元素上预设
style="stroke-dasharray: X; stroke-dashoffset: X;"，浏览器按默认值渲染首帧 - 动画卡在半截 →
stroke-dasharray值小于实际路径长度，虚线模式循环导致重复绘制 - 动了但方向反了 → 路径绘制方向（如
d="M100,50 L0,50"从右往左）和stroke-dashoffset减小方向冲突；可改用负向动画：from { stroke-dashoffset: 0; } to { stroke-dashoffset: -X; } - 响应式缩放后错位 →
getTotalLength()受viewBox影响，窗口 resize 后需重新计算并重设样式
纯 CSS 能否绕过 JS 获取路径长度
不能。CSS 无法调用 getTotalLength()，所有“写死 stroke-dasharray: 500”的方案，在字体、字号、字形微调后必然失效。
可行替代方案（仅限简单场景）：
- 用
-webkit-text-stroke+opacity或transform: scale()做淡入/缩放，但不是“绘制感”动画 - 用
text-shadow多层叠加模拟描边，再配合animation改变颜色或偏移，视觉近似但非真实描边路径 - 构建时用工具（如 SVGOMG）导出已计算好长度的 SVG，硬编码进 HTML —— 适合静态 Banner，不适用于动态文案
动画结束后怎么保持描边不消失
必须加 animation-fill-mode: forwards，否则动画一结束就回退到初始 stroke-dashoffset 值（即全隐藏状态）。
另外两个容易被忽略的点：
-
stroke颜色不能是transparent或背景色一致，否则“画完”也看不见 - 如果文字含空格或换行，
<text></text>会按单个 DOM 节点计算总长，但实际轮廓可能断裂；此时应拆成多个<text></text>分别处理
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
