Как получить доступ к функции javascript в теге объекта html из SVG

Question

Я использовал onload с другого svg, который видел, но мне было интересно, что именно он делает. Как я получаю сообщение об ошибке, говоря, что тест не является функцией. Я попытался изменить onclick = "test ()" на window.objectID.functionName, как указано в другом ответе SO, например "window.mySvg.test ()", но получил сообщение "Не удается прочитать тест свойства undefined". Если это невозможно, то каков лучший способ заставить диалоговое окно из jquery отображаться, например, sweetalert js, когда что-то щелкнуло внутри svg? Спасибо

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

Здесь определенно обманывают, но если кто-то еще сталкивается с чем-то подобным, это потому, что тестовая функция была определена в другой функции. Перемещение функции test () из eventListener, но по-прежнему внутри тегов script, позволило мне получить к ней доступ через событие onclick из svg, добавив top. Родитель. window.parent или window.top перед тестом () как таковой "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>