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

Posted 2023-03-22

【中文标题】Javascript 函数未在单击时定义 SVG 元素

【英文标题】：Javascript function not defined SVG element on click

【发布时间】：2022-01-11 23:12:59

【问题描述】：

我有一个 svg，里面只有 rect 元素，点击时有内联 javascript 函数调用。 我使用对象标签在我的 html（基于电子）中嵌入了 svg。 问题是，如果我在 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 标签之外。如何做到这一点？

【问题讨论】：

top.openDialog（或父级）。见developer.mozilla.org/en-US/docs/Web/API/Window/top

你能回答如何从 inline 调用 top.openDialog() 吗？我需要将 top 作为 javascript 变量设置为 window.top 吗？

感谢罗伯特·朗森。它有效。

可爱，你现在可以写答案了。

在codepen 中工作得很好。你可以在任何你想要的地方编写js代码，并在任何你需要的地方调用所需的函数：在svg标签中，在rect标签中，在circe标签中，甚至可以将它包装在div中。

【参考方案1】：

我正在根据 cmets 编写问题陈述和答案。

svg 在它自己的范围内搜索函数。为了让 svg 浏览整个 dom，只需添加 top.functionCall() 其中 top 是窗口层次结构中最顶层的窗口

解决办法是

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