svg缩放移动、移动轨迹追溯_SVG┃路径动画 - 沿路径移动

需求

要做一个开关和一个电灯，中间电线连接，点击开关的时候，光点从开关出发，沿电线移动到灯泡，然后灯泡熄灭。

translate

最初的思路是给通过改变光点的 translate 方式来移动其位置，这样的话动画一共需要分 10 段完成，而且在转弯的曲线部分会不够平滑。

motion-path

考虑到 SVG 中有 path 元素可以定义路径，CSS3 中会不会也有类似的方法。搜索到有 motion-path 可以很方便使元素按照路径进行移动。通过定义 motion-path 并且指定 motion-offset 的渐变来实现光点的移动。

@keyframes ani_move {

100% {

motion-offset: 100%;

}

}

#star.move {

motion-path: path('m40,47 115,0 c0,0 38,0 38,-38m0,0 0,-235c0,0 -0,-21 -28,-20m0,0 -237,0c0,0 -26,0 -26,29m0,0 0,190c0,0 0,22 30,22m0,0 92,0c0,0 18,0 18,-18m0,0 0,-10');

animation: ani_move linear 3s;

display: block;

}

这种方法做完之后在 Android 设备上可以正常使用，在 iOS 设备上毫无反应，MDN 提示这个属性是被摒弃的属性，在兼容性列表中标记各大浏览器均不支持。推荐可以使用 offset-path 属性来替代，然而