SVG animateMotion (calcMode spline) not working in FF and Safari

Question

I want to move a circle along a path inside an svg with different easing. I wanted to use animateMotion but have never used it before. Using JS is not an option in this case.

It works fine in Chrome and Opera, but not in Safari and Firefox.

<animateMotion 
    dur="4s" 
    repeatCount="indefinite"
    calcMode="spline" 
    keySplines="0 0 0.5 1 ; 0 0 0.5 1 ; 0.3 0 1 1"
    keyTimes="0 ; 0.3 ; 0.6 ; 1"
    path="M54,183.8c0-86.5,128.5-87.2,128.5,0c0-86.5,116.9-87.2,116.9,0c0-86.5,115.1-87.2,115.1,0
    c0-86.5,55.5-123.5,55.5,111" />

If I remove calcMode, keySplines and keyTimes it works in all browsers.

I would also appreciate any alternative solution for moving an element on rounded curves with different easings.

Answer 1

Solution

I figured out, that two things were independently from each other creating the issue:

1. Safari does not accept spaces between KeyTimes Values (all other browsers do, and Safari also does within KeySplines).
2. Firefox seems to need one more value for KeyTimes and KeySplines. So I added one value to each line.

Fixed Code:

keySplines="0 0 0.5 1 ; 0 0 0.5 1 ; 0 0 0.5 1 ; 0 0 0.5 1"
keyTimes="0;0.2;0.4;0.6;1"

Full Example:

<svg version="1.1" id="Layer_5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
  <g>
    <circle r="13.5" fill="black">
      <animateMotion 
      	dur="4s" 
      	repeatCount="indefinite"
      	calcMode="spline" 
        keySplines="0 0 0.5 1 ; 0 0 0.5 1 ; 0 0 0.5 1 ; 0 0 0.5 1"
      	keyTimes="0;0.2;0.4;0.6;1"
       	path="M54,183.8c0-86.5,128.5-87.2,128.5,0c0-86.5,116.9-87.2,116.9,0c0-86.5,115.1-87.2,115.1,0c0-86.5,55.5-123.5,55.5,111" />
	  </circle>
  	<path stroke="red" fill="none" d="M54,183.8c0-86.5,128.5-87.2,128.5,0c0-86.5,116.9-87.2,116.9,0c0-86.5,115.1-87.2,115.1,0c0-86.5,55.5-123.5,55.5,111"/>
  </g>
</svg>