<svg width="500" height="350">
  <circle id="circle" r="30" cx="50" cy="50" fill="orange" />
  <rect id="rect" width="50" height="50" x="25" y="200" fill="green" />
<!--   圆动画 -->
  <animate
    xlink:href="#circle"
    attributeType="XML"
    attributeName="cx"
    from="50"
    to="450"
    dur="5s"
    begin="0s"
    repeatCount="3"
    fill="freeze"
    id="circleAnim"
  />
<!--   矩形动画在第二次之后结束前1s开始动画 -->
  <animate
    xlink:href="#rect"
    attributeType="XML"
    attributeName="x"
    from="50"
    to="450"
    dur="5s"
    begin="circleAnim.repeat(2) - 1s"
    repeatCount="3"
    fill="freeze"
    id="rect-anim"
  />
</svg>

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