There seems to be an issue regarding the SVG animation in case of keySplines. I'm using google chrome v46.0
The svg code,
<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000" viewBox="0 0 1000 1000" style="background:#141313">
<g>
<animateMotion path="M125,95 C158.33,95 258.33,95 325,95 C391.66,95 491.66,95 525,95 " calcMode="spline" begin="0s" dur="10s" keyTimes="0;0.50;1" keySplines="0 1 0 1 ;0 0 1 1 " fill="freeze" />
<path d="M75,-75 C75,-75 75,75 75,75 C75,75 -75,75 -75,75 C-75,75 -75,-75 -75,-75 C-75,-75 75,-75 75,-75 " stroke="#ffffff" stroke-width="2" stroke-opacity="1" fill="#ff0000" fill-opacity="1">
</path>
</g>
<!-- the path defnined in the above animatemotion tag broken into component paths and visualized for reference -->
<path d="M125,95 C158.33,95 258.33,95 325,95 " stroke="#ffffff" stroke-width="2" stroke-opacity="1" fill-opacity="0" />
<path d="M325,95 C391.66,95 491.66,95 525,95 " stroke="#ffff00" stroke-width="2" stroke-opacity="1" fill-opacity="0" />
</svg>
As you can see , it is a simple rectangle animation which animates along the path defined in tag with 2 segments of keySplines defined of which 1st segment 0 1 0 1 is non linear and the second segment 0 0 1 1 gives linear interpolation. i have visualized the path which is a straight line in white and yellow which signify first and the second segment respectively.
For the first segment, the rectangle should run from start of the white line to end of white line(as its center) .for the second segment , it should run from start of yellow line to end of yellow line(as its center).
But that's not hapenning in this case. And when i change the 1st segment keySpline from 0 1 0 1 to 0 0 1 1 , the animation runs as it is expected.
Am i going wrong somewhere or can this be a bug in chrome?
Thanks !