<h1>Hit the circle </h1>
<svg height="150" width="100%">
  <circle id="catch-me" r="50" cy="75">
    <animate attributeName="cx"
             values="0%;100%;30%;65%;5%;95%;0%"
             dur="5s"
             repeatDur="indefinite"
             calcMode="paced" />
             
  </circle>
</svg>
<ul id="log"></ul>
<p>Although the circle is animated using SMIL, the SVG DOM still provides a way to figure out exactly where it is (i.e., the current value of the <code>cx</code> attribute) at the time of processing the event.  Every time the circle receives a mousedown event, it will be logged above.
</p>
<p>P.S.: I'm using a mousedown event, because very few click events were getting through—the circle was moving out from under the mouse before the mouseup (and therefore click) was getting processed. If the circle is still moving too fast, increase the <code>dur</code> attribute, or reduce the width of the frame.</p>
  
circle#catch-me {
  stroke:#222;
  stroke-width:8;
  fill:#888;
}
circle#catch-me:hover {
  stroke:#4f4;
}
svg {
  background: linear-gradient(to bottom, lightyellow 10%, tomato 40%, darkred, tomato 60%, lightyellow 90%);
}
h1 {
  position: absolute;
  width: 100%;
  text-align: center;
  text-shadow: 0 0 0.3em #eee, 0 0 0.1em #eee;
  pointer-events: none;
}
body:hover h1 {
  opacity: 0.2;
}
ul#log:not(:empty) {
  padding-bottom: 1em;
  border-bottom: gray 2px solid;
}
var log = document.getElementById("log");
document.getElementById("catch-me")
        .addEventListener("mousedown", logAnimations);

function logAnimations(e){
  var c = e.target,
      l = document.createElement("li");
  l.textContent = ["Clicked at ",
                   c.cx.animVal.valueAsString,
                   " (",
                   c.cx.animVal.value,
                   "px)"
                   ].join("");
  log.insertBefore(l, null);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.