1. 设定场景#

假设你的爱心路径总长度是 2783 像素。

2. stroke-dasharray: 2783 做了什么？#

这个属性定义了虚线的模式：实线长度, 间隔长度。 当你设置 stroke-dasharray: 2783 时，浏览器实际上生成了这样一个无限循环的模式：

• 第1段：2783px 的实线（红色）
• 第2段：2783px 的空白（透明）
• 第3段：2783px 的实线（红色）
• 第4段：2783px 的空白（透明）
• …以此类推

3. stroke-dashoffset 做了什么？#

这个属性决定了描边从哪里开始渲染。

• 当 stroke-dashoffset: 0 时（动画结束状态）：

  • 描边从**第1段（实线）**的开头开始绘制。
  • 因为实线有 2783px 长，刚好覆盖了整个爱心路径。
  • 结果：你看到一个完整的红色爱心。

• 当 stroke-dashoffset: 2783 时（动画开始状态）：

  • 描边向左（或向后）偏移了 2783px。
  • 这意味着，路径的起点现在对应的是**第2段（空白）**的开头。
  • 第1段（实线）去哪了？ 它被推到了路径起点的前面（负值方向）。就像火车头已经开过了站台，现在停在站台上的全是透明的车厢。
  • 因为空白段也有 2783px 长，它刚好覆盖了整个爱心路径。
  • 结果：爱心看起来是空的（隐藏了）。

图解总结#

1
路径长度: [====================] (2783px)
2

3
状态 1: offset = 0
4
描边模式: [实线实线实线实线...] [空白空白空白空白...]
5
对应路径: [====================]
6
结果:     [     完全显示      ]
7

8
状态 2: offset = 2783
9
描边模式: [实线实线实线实线...] [空白空白空白空白...]
10
          <-- 被推出去,看不见 -->
11
对应路径:                       [====================]
12
结果:                           [     完全隐藏      ]

所以，实线并没有消失，它只是处于“待机区”（路径起点之前），等待 stroke-dashoffset 慢慢变小（从 2783 变到 0），把它慢慢“拉”回到可视路径上。