单击时未定义 Javascript 函数的 SVG 元素

Question

我有一个 svg，其中只有 rect 元素，其中单击时有内联 javascript 函数调用。我使用对象标签将 svg 嵌入到我的 html（基于电子）中。问题是，如果我在 svg 之外编写 javascript，则必须在单击 svg 中的 rect 元素时调用它，它找不到定义的函数，而是抛出一个错误，指出函数未定义。但如果我将相同的脚本粘贴到 svg 标签内，它就可以正常工作。

为什么无法找到在 svg 范围之外编写的脚本？

html

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

带有内联 javascript 函数调用的 svg

<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 在其自身范围内搜索函数。为了使 svg 查看整个 dom，只需添加 top.functionCall() ，其中 top 是窗口层次结构中最顶层的窗口

解决办法是

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