SVG中<animateMotion>的keySplines属性在Firefox中无法生效

问题根源 #

Firefox对<animateMotion>结合<mpath>时，用values="0;1"表示路径进度的逻辑支持存在问题——它无法正确将0和1解析为路径的起始/结束进度，反而会把这些值当成坐标处理，导致元素停留在初始位置不动。

两种可行解决方案 #

方案1：调整SVG animateMotion写法 #

去掉<mpath>，直接在<animateMotion>的path属性中定义路径，保留keySplines等缓动相关属性，Firefox就能正确识别并应用自定义缓动：

<svg
      xmlns="http://www.w3.org/2000/svg"
      width="156.761"
      height="139.855"
      viewBox="0 0 156.761 139.855"
    >
      <circle id="ball" r="5" fill="red"/>
      <path
        id="foo-rail"
        fill="none"
        stroke="lightgrey"
        d="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />
      <animateMotion
        href="#ball"
        dur="2s"
        begin="0s"
        fill="freeze"
        rotate="auto"
        calcMode="spline"
        keySplines="0.31 0.24 0.41 0.88"
        keyTimes="0;1"
        path="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z"
      />
    </svg>

方案2：改用CSS动画实现（推荐） #

用CSS的offset-path和offset-distance属性实现路径动画，搭配cubic-bezier自定义缓动，跨浏览器兼容性更一致，代码也更简洁：

<svg
      xmlns="http://www.w3.org/2000/svg"
      width="156.761"
      height="139.855"
      viewBox="0 0 156.761 139.855"
    >
      <style>
        #ball {
          offset-path: path('M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z');
          animation: move 2s cubic-bezier(0.31, 0.24, 0.41, 0.88) forwards;
        }
        @keyframes move {
          from { offset-distance: 0%; }
          to { offset-distance: 100%; }
        }
      </style>
      <circle id="ball" r="5" fill="red"/>
      <path
        id="foo-rail"
        fill="none"
        stroke="lightgrey"
        d="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />
    </svg>

这里的cubic-bezier参数和你原来的keySplines值完全对应，动画效果和原需求一致，同时能在所有现代浏览器正常运行。

内容的提问来源于stack exchange，提问作者Caleb Taylor