Javascript function 未定義 SVG 元素點擊

Question

我有一個 svg，其中只有 rect 元素，它具有內聯 javascript function 點擊調用。 我使用 object 標簽在我的 html（基於電子）中嵌入了 svg。 The problem is if I write javascript outside svg which has to be called on clicking rect element in svg it does not find the function defined instead throws an error saying function is not defined. 但是，如果我將相同的腳本粘貼到 svg 標記中，它就可以正常工作。

為什么無法找到在 svg scope 之外編寫的腳本？

html

<object class="svg" id="show-sld" data="sld_old.svg" type="image/svg+xml">
</object>

svg 與內聯 javascript function 調用

<svg>
<rect style="opacity:1;fill:#000000;fill-opacity:0;" id="some-id" onclick="openDialog()"/>
</svg>

javascript

function openDialog(){
#do something
}

如果我將上面的腳本粘貼到 svg 中，效果很好，但這不是我想要的。 需要將 javascript 帶到 svg 標簽外。 如何做到這一點？

Answer 1

我正在根據評論編寫問題陳述和答案。

svg 在自己的 scope 中搜索 function。 為了使 svg 可以查看整個 dom，只需添加 top.functionCall() 其中 top 是 window 層次結構中最頂層的 window

解決方案是

<svg>
<rect id="some-id" onclick="top.openDialog()"/>
</svg>