<svg width="500" height="350">
  <circle id="orange-circle" r="30" cx="50" cy="50" fill="orange" />
  <rect id="blue-rectangle" width="50" height="50" x="25" y="200" fill="#0099cc" />
  
  <animate xlink:href="#orange-circle"
           attributeName="cx"
           from="50"
           to="450"
           begin="click"
           dur="5s"
           fill="freeze"
           id="circ-anim"
           />
  <animate xlink:href="#blue-rectangle"
           attributeName="x"
           from="50"
           to="425"
           dur="5s"
           begin="circ-anim.begin + 1s"
           fill="freeze"
           id="rect-anim"
           />
           
</svg>
<p>点击圆开始动画，矩形1s后开始动画</p>

svg {
  border: 3px solid #eee;
  display: block;
  margin: 1em auto;
}
p {
  color: #aaa;
  text-align: center;
  margin: 2em 0;
}