<svg width="500" height="350">
  <circle id="circle" r="30" cx="50" cy="50" fill="orange" />
  <animate
  xlink:href="#circle"
  attributeName="cx"
  from="0"
  to="100"
  additive="replace"
  repeatCount="3"
  dur="1s"
  begin="click" 
  keyTimes="0; 1"   
  calcMode="spline"                                 
  keySplines="0.42 0 1 1"
  fill="freeze"
  id="circ-anim"
/>
</svg>
<p>
  additive 有2个值：<br>
  1. "sum" - 这里相当于从 50 位置开始<br>
  2. "replace" - 默认值，从 0 位置开始，会出现跳动的情况
</p>

svg {
  border: 3px solid #eee;
  display: block;
  margin: 1em auto;
}

p {
  color: #aaa;
  text-align: center;
  margin: 2em 0;
}