SVG: <animateMotion> Using keySplines not working in Firefox

Question

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>

Answer 1

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>

Answer 2

Per the SMIL specification

When a path is combined with "discrete", "linear" or "spline" calcMode settings, the number of values is defined to be the number of points defined by the path, unless there are "move to" commands within the path. A "move to" command does not define an additional "segment" for the purposes of timing or interpolation. A "move to" command does not count as an additional point when dividing up the duration, or when associating keyTimes and keySplines values. When a path is combined with a "paced" calcMode setting, all "move to" commands are considered to have 0 length (i.e., they always happen instantaneously), and should not be considered in computing the pacing.

• So you need 4 keyTimes for your path and you've only supplied two.

• Because of the above point, you need 3 keySplines and you've only supplied one.

Your animation is therefore in error and should not run.

It seems like you've found bugs in both Chrome and Safari.