<svg width="500" height="350">
  <circle id="circle" r="30" cx="50" cy="50" fill="orange" />
<!--   圆动画 使用keyTimes + values后 from & to直接被忽略 -->
  <animate
    xlink:href="#circle"
    attributeType="XML"
    attributeName="cx"
    from="50"
    to="450"
    dur="5s"
    begin="click"
    keyTimes="0; 0.5; 0.8; 1"
    values="50; 490; 350; 450"
    fill="freeze"
    id="circleAnim"
  />
</svg>

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