使用嵌套在其他 SVG 内的空 SVG 时不会触发 OnClick答案

【问题标题】：OnClick not being triggered when using empty SVG nested inside of other SVG使用嵌套在其他 SVG 内的空 SVG 时不会触发 OnClick
【发布时间】：2021-08-10 02:03:06
【问题描述】：

我有 2 个 svg 元素，一个在另一个里面是空的，当我点击它时，我需要在我的事件目标中获取内部 svg 元素，但我无法让它工作。我注意到的第一个问题是，当使用 Chrome 时，内部 svg 以 0 高度和 0 宽度显示，这在 Firefox 中不会发生。第二个问题是，在我为我的内部 svg 创建了 onclick 侦听器后，该事件永远不会触发。

我也试过了：

在我的外部 svg 中设置 onclick 侦听器并获取事件目标。它总是返回外部 svg 而不是内部 svg。仅当我有一个矩形、圆形、路径、(...) 时才有效。
在我的内部 svg 中将指针事件设置为全部，在外部 svg 中设置为无。不触发点击事件。

我不能做什么：

获取我的外部 svg 的 firstElementChild，我会有更多嵌套的 svg，我需要确切知道我点击了哪个。

例子：

<div>
    <svg id="0" x="0" y="0" height="100%" width="100%" viewBox="0 0 1000 1000">
        <svg id="1" x="0" y="0" height="1000" width="1000" viewBox="0 0 1000 1000"></svg>
    </svg>
</div>

jsfiddle example here

【问题讨论】：

不要嵌套 SVG——理论上这是个好主意，但浏览器 bug 太多——使用 g 标签和转换来进行嵌套定位。
我决定在我的内部 svg 的背景中创建一个透明矩形，它似乎可以工作。它更适合我正在构建的内容，但您的回答是有效的解决方法。

标签： javascript html svg

【解决方案1】：

看起来 SVG 不支持点击监听器。但是您是否尝试在每个 SVG 周围放置另一个 div 并将点击侦听器添加到该 div？

<div>
  <div id="svg1">
    <svg id="0" x="0" y="0" height="100%" width="100%" viewBox="0 0 1000 1000">
        <svg id="1" x="0" y="0" height="100%" width="100%" viewBox="0 0 1000 1000"></svg>
    </svg>
  </div>
</div>

document.getElementById("svg1").addEventListener("click", yourFunc)

【讨论】：

这对我不起作用。您的解决方案的行为与将 onClick 侦听器添加到外部 svg 完全相同，事件目标始终是外部 svg。
你设置了外层div的高宽吗？
内部 svg 静止图像在 Chrome 中以 0px 的高度和宽度显示。似乎没有多大意义。