路径的另一个有趣用法是创建动画路径。这种方法不仅仅适用于SVG。我们在这里使用的是 offset-path CSS属性,它也适用于任何其他HTML元素。如果检查这个属性的值,就会发现定义路径的方式与SVG相同。
首先,我们有轨道。我们把它定义为一条路径。
然后我们有一个雪橇,它是由两条不同的路径组合在一起制成的。
这两者本身都不是很有趣。我们可以添加一个动画,其中动画路径与轨道的路径相同。动画路径只是略有不同。
默认情况下,雪橇的中下部分将沿着路径移动,它的开始和结束部分将略微沉入路径中。相反,改变路径,在一些急转弯时稍微抬高雪橇。