Why doesn't “onload” work on a <circle> element?

Question

Code:

      <circle id="whitecircle" cx="500" cy="500" r="25" fill="url(#grad1)" onclick="setCoordinates(evt)"  />

This works perfectly well. "setCoordinates(evt)" function gives the circle a random position when it is clicked on.

However, when I replay "onclick" with "onload", it just stays at "500,500".

Why is this?

Answer 1

The element isn't loading any external content. Since there is nothing to load, it doesn't have a load event.

You can just run a script immediately after defining the circle element.

<circle ... />
<script> function_call() </script>

(the HTML body element is a special case, representing the current document)

Answer 2

On Firefox onload events are only dispatched to <svg> elements for performance reasons. Firefox has an existing bug about not dispatching onload events to <image> elements but at the moment only <svg> elements work cross-browser.

Answer 3

I have this problems sometimes too with the onload event. Move your javascript call to the end of the page.