第 18 天：如何使用 SVG 沿路径制作动画

路径的另一个有趣用途是创建动画路径。这种方法不仅适用于 SVG。我们在这里使用的是 CSS 属性 offset-path，它同样适用于任何其他 HTML 元素。但如果检查一下该属性的值，就会发现我们定义路径的方式与 SVG 相同。

首先是轨道。我们将其定义为一条路径。

然后我们还有一个雪橇，它是由两条不同的路径组合而成的。

这两者本身都不是很有趣。新颖之处在于，我们可以添加一个动画，动画路径与轨道路径基本相同。动画路径只是略有不同，以便让雪橇更好地适应路径。默认情况下，雪橇的中下部会沿着路径移动，而头部和尾部会略微下沉到路径中。而不是改变路径，使雪橇在某些急转弯处略微上升。

<svg width="400" height="200" viewBox="-200 -100 400 200" fill="none">
  <path
    stroke="#E0CEB9"
    stroke-width="4"
    d="M-200 80 L -80 80 Q 80 80 70 -10 A 70 70 0 0 0 -70 -10 Q -80 80 80 80 L 200 80"
  />

  <g class="sleigh">
    <path
      d="
      M -30 -2 L 30 -2 A 10 10 0 0 0 30 -22
      M -20 -2 L -20 -17
      M 20 -2 L 20 -17"
      stroke="#AF6455"
      stroke-width="5"
    />
    <path d="M -27 -17 L 27 -17" stroke="#7A504F" stroke-width="6" />
  </g>
</svg>

.sleigh {
  offset-path: path(
    "M-200 80 L -90 80 Q 60 80 60 -10 A 50 50 0 0 0 -60 -10 Q -60 80 90 80 L 200 80"
  );
  animation: roller-coaster 6000ms infinite linear;
}

@keyframes roller-coaster {
  0% {
    offset-distance: 0%;
  }
  100% {
    offset-distance: 100%;
  }
}