<svg width="500" height="100">
  <circle id="orange" r="30" cx="50" cy="50" fill="orange" />
  <animate
    xlink:href="#orange"
    attributeName="fill"
    from="#0099CC"
    to="deepPink"
    dur="5s"
    begin="0s"
    end="moveAnim.begin"
    repeatCount="indefinite"
    fill="freeze"
    id="colorAnim"
  />
  <animate
    xlink:href="#orange"
    attributeName="cx"
    from="50"
    to="450"
    dur="5s"
    begin="click"
    fill="freeze"
    id="moveAnim"
  />
</svg>
<p>
  橙色圆动画效果1：无限颜色重复，<br>
  动画效果2：移动，需要点击开始动画 <br>
  当动画2开始时，结束动画1
</p>

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

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