How to access a javascript function within html object tag from an svg

Question

I used the onload from another svg I saw but wonder exactly what it does. As is I get an error saying test is not a function. I tried to change the onclick="test()" to window.objectID.functionName as stated in a different SO answer such as "window.mySvg.test()" but got a "Can not read property test of undefined". If this is not possible then what is the best way to make a dialog box from jquery appear such as sweetalertjs when something is clicked from within the svg? Thanks

HTML

<div class="container-fluid">
  <h1>Demo</h1>
  <object id="mySvg" data="{{ url_for('static', filename='images/test.svg') }}" type="image/svg+xml">
  Browser could not render Svg
</object>
<script>
var embed = document.getElementById("mySvg");
embed.addEventListener('load', function()
{
    var svg = embed.getSVGDocument();
    function test()
    {
        console.log("accessed function");
    }
});
</script>
</div>

SVG

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg id="svg1394" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" onload="var src; if (document.documentURI) src = document.documentURI; else if (this.getSrc) src = this.getSrc(); else src = document.location.href + ''; try {parent.preload.load(src);}catch(e) {}" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" height="800" sodipodi:version="0.32" width="1280" inkscape:export-xdpi="120" version="1.0" inkscape:output_extension="org.inkscape.output.svg.inkscape" inkscape:export-ydpi="120" xmlns:cc="http://creativecommons.org/ns#" xmlns:xlink="http://www.w3.org/1999/xlink"  xmlns:dc="http://purl.org/dc/elements/1.1/">
<rect id="rect1" height="70" width="20" stroke="#000" y="355.6" x="307.7" stroke-width=".8833" fill="#C0C0C0" onclick="test()"/>
</svg>

Answer 1

Definitely goofed up here but if anyone else encounters something like this it's because the test function was defined within another function. Moving the test() function out of the eventListener but still within the script tags allowed me to access it through an onclick event from svg by adding top. parent. window.parent or window.top infront of the test() as such "window.parent.test()"

HTML

<div class="container-fluid">
  <h1>Demo</h1>
  <object id="mySvg" data="{{ url_for('static', filename='images/test.svg') }}" type="image/svg+xml">
  Browser could not render Svg
</object>
<script>
var embed = document.getElementById("mySvg");
embed.addEventListener('load', function()
{
    var svg = embed.getSVGDocument();
});
function test()
    {
        console.log("accessed function");
    }
</script>
</div>

SVG

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg id="svg1394" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" onload="var src; if (document.documentURI) src = document.documentURI; else if (this.getSrc) src = this.getSrc(); else src = document.location.href + ''; try {parent.preload.load(src);}catch(e) {}" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" height="800" sodipodi:version="0.32" width="1280" inkscape:export-xdpi="120" version="1.0" inkscape:output_extension="org.inkscape.output.svg.inkscape" inkscape:export-ydpi="120" xmlns:cc="http://creativecommons.org/ns#" xmlns:xlink="http://www.w3.org/1999/xlink"  xmlns:dc="http://purl.org/dc/elements/1.1/">
<rect id="rect1" height="70" width="20" stroke="#000" y="355.6" x="307.7" stroke-width=".8833" fill="#C0C0C0" onclick="top.test()"/>
</svg>