从 svg 的外部 JS 脚本中获取其他 html 元素

Question

我有一个 svg 图像，我使用以下标签将其添加到我的.html文档中：<object><object data="./svg/bookmark.svg" type="image/svg+xml" id="bookmark"></object>然后我可以像这样将svg定位在.css文件中：#bookmark{            position: absolute;            top: 0rem;            left: calc(30rem - 0.1rem);            z-index: 10;            width: 1.25rem;            height: auto;}所以造型很有效。此 svg 应显示一个菜单，当按下 svg 时该菜单会从左侧滑动。我尝试像这样实现 JS：我修改了一个svg：<svg>我通过在标签中添加这个属性来启用对外部 JS 的采购。：xmlns:xlink="http://www.w3.org/1999/xlink"<svg>我在标签后插入了一个指向外部 JS 的链接：<script xlink:href="../js/bookmark.js" />我onclick在<path>标签内添加了一个：onclick="bookmark_click()"我创建了一个包含以下内容的外部 JS 文件 ../js/bookmark.js：function bookmark_click(){     console.log("Bookmark clicked.");     let x = document.getElementById("menu");     console.log(x);}我在浏览器的控制台中得到了这个输出：看起来外部 JS 脚本可以执行简单的 JS 命令，但无法在我的网页中看到其他元素 - 我们可以看到x返回为null. 我究竟做错了什么？我不想将 svg 直接嵌入到我的.html文档中。

Answer 1

如果 id="menu" 的元素在 SVG 的父 HTML 文档中，那么您可以使用 parent 来获取它，即

let x = parent.document.getElementById("menu")