B. Calling Javascript functions in HTML documents from events in SVG DOM

This is actually quite simple. To refer to a JavaScript function named "f( )" that resides in the HTML document (in which the SVG document is embedded), let the SVG document call the function through "top.f( )".

HTML page Embedded SVG
<html><head><script> function notify(evt){alert(evt.target.id)} </script></head><body width="100%"> <embed src="pink.svg" width="100%"> </embed> </body></html> <svg xmlns= "http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink" width="100%" height="100%"> <ellipse onclick="top.notify(evt)" id="g1" cx="25%" cy="25%" rx="24%" ry="24%" fill="pink" stroke="blue"/> </svg>
Appearance

Calling a function in a web page from an event in SVG. Click the oval.

A click on the ellipse easily finds the function “notify()” and passes the string as parameter as anticipated.

Note: while the use of the notation "top.notify()" can be replaced by simply "notify()" in Internet Explorer, "top" is needed in Opera and Firefox for the SVG object to "find" its container.