SVG 描边动画

核心原理

描边动画（Line Drawing Animation）能产生一种图案正在被“画”出来的神奇效果。

虽然它依赖 SVG，但动画的控制完全由 CSS 完成。核心基于两个 SVG 属性：

stroke-dasharray：将线条变为虚线。参数可以是两个值 10, 5（实线长10，间隙长5）。如果只设一个值，表示实线和间隙一样长。
stroke-dashoffset：设置虚线的偏移量。

系统化原理：

将 stroke-dasharray 设置为路径的总长度。此时，线条变成了一段超长的实线（长度等于路径长）和一段超长的间隙（长度也等于路径长）。
初始状态将 stroke-dashoffset 设置为路径的总长度。此时，可见区域正好被那段“超长的间隙”覆盖，所以整个图形是不可见的。
动画过程中，将 stroke-dashoffset 逐渐归 0。此时，“超长的实线”慢慢被拉回可见区域，看起来就像线条在自动延伸。

实现步骤

1. 准备 SVG

需要一个带有 stroke（描边）的 SVG。注意，这种动画只对 <path>, <line>, <circle>, <rect> 等描边元素有效。

2. 获取路径长度

可以通过 JS path.getTotalLength() 获取长度

3. CSS 动画

交互式按钮边框

这种技术常用于 Hover 时的边框效果。