从 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&nbsp;x&nbsp;=&nbsp;parent.document.getElementById("menu")