在 SVG 与 CSS 的搭配中，有一类非常适合拿来做动画的属性，也就是 stroke-* 相关的几个属性，利用它们，我们只需要掌握简单的 SVG 语法，就可以快速制作相关的线条动画。
我们利用 SVG 中几个和边框、线条相关的属性，来实现文字的线条动画，下面罗列一下，其实大部分和 CSS 对比一下非常好理解，只是换了个名字：
stroke-width：类比 css 中的 border-width，给 svg 图形设定边框宽度；
stroke：类比 css 中的 border-color，给 svg 图形设定边框颜色；
stroke-linejoin | stroke-linecap：设定线段连接处的样式；
stroke-dasharray：值是一组数组，没数量上限，每个数字交替表示划线与间隔的宽度；
stroke-dashoffset：则是虚线的偏移量
具体的更深入的介绍，可以看看这篇：【Web动画】SVG 线条动画入门
线条文字动画接下来，我们利用 stroke-* 相关属性，实现一个简单的线条文字动画。
<svg viewBox="0 0 400 200"> <text x="0" y="70%"> Lorem </text> </svg> svg text { animation: stroke 5s infinite alternate; letter-spacing: 10px; font-size: 150px; } @keyframes stroke { 0% { fill: rgba(72, 138, 20, 0); stroke: rgba(54, 95, 160, 1); stroke-dashoffset: 25%; stroke-dasharray: 0 50%; stroke-width: 1; } 70% { fill: rgba(72, 138, 20, 0); stroke: rgba(54, 95, 160, 1); stroke-width: 3; } 90%, 100% { fill: rgba(72, 138, 204, 1); stroke: rgba(54, 95, 160, 0); stroke-dashoffset: -25%; stroke-dasharray: 50% 0; stroke-width: 0; } }动画的核心就是，利用动态变化文字的 stroke-dasharray 和 stroke-dashoffset 形成视觉上的线条变换，动画的最后再给文字上色。看看效果：
CodePen Demo -- SVG Text Line Effect
最后本文介绍了一些我认为比较有意思的文字动画小技巧，当然 CSS 中还有非常多有意思的文字效果，限于篇幅，不一一展开。
更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ，持续更新，欢迎点个 star 订阅收藏。
如果还有什么疑问或者建议，可以多多交流，原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。