SVG字母X绘制动画解析：Codepen方案原理及自写代码问题排查

一、Codepen示例的参数逻辑拆解 #

要理解这段代码，核心是先明确SVG路径的实际长度——这是所有stroke动画参数的基础。你可以通过JS的pathElement.getTotalLength()获取目标路径（#path2、#path3）的长度，假设这个值是400（对应动画to阶段的stroke-dasharray: 400），参数逻辑如下：

1. 初始状态：完全隐藏线条

   • stroke-dasharray: 430：设置一个比路径实际长度（400）稍大的实线段长度，确保单个实线段能覆盖整个路径。
   • stroke-dashoffset: 800：这个值是路径长度的2倍（400×2）。此时，实线段会被完全偏移到路径的可视范围之外（偏移量远大于dasharray长度），所以初始看不到任何线条。

2. 动画过程：线条逐渐显现
   动画通过将stroke-dasharray从430缩小到400（等于路径长度）实现绘制效果：

   • 当stroke-dasharray等于路径长度时，stroke-dashoffset: 800刚好是dasharray的2倍，实线段的起始位置会精准对齐路径起点，整个路径被实线段完全覆盖。
   • 动画过程中，dasharray逐渐缩短，实线段的末端会逐步向路径起点移动，最终完整覆盖路径，呈现出“从无到有”的绘制效果。

二、你的代码失效的核心原因 #

你的代码逻辑完全偏离了SVG线条动画的常规实现，问题集中在三点：

1. 参数与实际路径长度不匹配
   你设置的stroke-dasharray: 50如果远小于X路径的实际长度，会把路径切割成多个短虚线段，初始状态就会显示零散的线段，而非完全隐藏。

2. 错误选择了动画属性
   常规的绘制动画应该修改stroke-dashoffset（从路径长度降到0），而你却在动画stroke-dasharray到0——当stroke-dasharray为0时，实线段长度为0，线条会直接消失，和你想要的“绘制显现”完全相反。

3. 初始状态逻辑错误
   要实现“从起点到终点绘制”，初始状态应该把stroke-dasharray和stroke-dashoffset都设为路径的实际总长度：此时实线段从路径终点开始，完全超出可视范围，动画时把stroke-dashoffset降到0，实线段会逐渐移动覆盖整个路径。

三、修正后的常规实现代码 #

先通过JS获取X两条路径的实际长度（比如得到400），然后使用以下代码：

#x-line-1, #x-line-2 {
  fill: none;
  stroke: #000;
  stroke-width: 2;
  stroke-dasharray: 400; /* 等于路径实际总长度 */
  stroke-dashoffset: 400; /* 初始偏移量等于长度，完全隐藏 */
}

#x-line-1 {
  animation: draw-x 0.6s linear forwards;
}

#x-line-2 {
  animation: draw-x 0.6s linear forwards;
  animation-delay: 0.3s; /* 延迟第二条线的绘制 */
}

@keyframes draw-x {
  to {
    stroke-dashoffset: 0; /* 偏移量归0，完整显示路径 */
  }
}

这段代码和你实现字母O的逻辑完全一致，能稳定实现X的双线条先后绘制效果。

内容的提问来源于stack exchange，提问作者Caleb St-Denis