I'm using a custom easing function, so I'm using keySplines, keyTimes and values attributes to achieve this. This animation works in Chrome and Safari, but in Firefox the ball object is supposed to follow the loop path, does not move at all (instead ball is in the top left corner, due to not having x y position).
If I remove those attributes then animation plays in Firefox, but without the easing function which is what i want.
<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"
values="0;1"
>
<mpath href="#foo-rail" />
</animateMotion>
</svg>There is a difference between the values and the keyPoints attributes here that is important.
values, same as from, to, or by, according to the spec of <animateMotion>, "must consists of a list of x, y coordinate pairs". They are meant to provide a path in the form of a polyline (but with subtle differences in the syntax). The value attribute should be ignored if a path attribute or a <mpath> child element is present. For example, you can describe a move from left to right across the viewport as values="0% 50%; 100% 50%".
keyPoints are an extension of SVG to the SMIL format. They use floating point numbers in the 0...1 range to describe how far along a path an object should be moved: "Distance calculations use the user agent's distance along the path algorithm." For example, you can describe a forth-and-back movement as keyPoints="0;1;0".
Your code mixed up both. Just rename values to keyPoints, keeping the value list, and your animation works as expected.
<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"
keyPoints="0;1"
>
<mpath href="#foo-rail" />
</animateMotion>
</svg>