<svg width="500" height="350">
  <circle id="orange" r="30" cx="50" cy="50" fill="orange" />
  <circle id="green" r="30" cx="50" cy="150" fill="green" />
  <animate
    xlink:href="#orange"
    attributeName="cx"
    from="50"
    to="450"
    dur="30s"
    begin="0s"
    end="greenAnim.begin"
    fill="freeze"
    id="orangeAnim"
  />
  <animate
    xlink:href="#green"
    attributeName="cx"
    from="50"
    to="450"
    dur="1s"
    begin="click"
    fill="freeze"
    id="greenAnim"
  />
</svg>
<p>
  橙色圆缓慢开始动画，绿色圆点击后开始动画，<br>而绿色圆开始动画时，橙色圆就会结束动画
</p>

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

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