<svg width="500" height="100">
  <circle id="orange-circle" r="30" cx="50" cy="50" fill="orange" />

  <animate xlink:href="#orange-circle" attributeName="cx" from="50" to="450" dur="1s" begin="click" fill="freeze" />
</svg>

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