如何允许点击可见性的svg子元素：隐藏？答案

【问题标题】：How to allow clicks on an svg child element with visibility: hidden?如何允许点击可见性的svg子元素：隐藏？
【发布时间】：2018-11-04 21:10:45
【问题描述】：

我有一个复杂的 SVG 图，它在 Edge 中一直存在渲染问题（图的某些部分以随机间隔闪烁、消失等。）我通过不断添加和删除“可见性：隐藏”来修复它（某种程度上）父分区这会在布局中断后“修复”布局（但不会阻止它再次中断）。

从隐藏到可见的变化发生得足够快，在视觉上没有区别，图表也不会从页面上消失。

我的问题是用户需要单击图表以获取更多信息，如果在元素具有可见性时发生单击事件，则会错过单击事件：隐藏设置为它（即使它看起来是可见的）。

如何允许点击具有“可见性：隐藏”的元素？

涉及的主要 CSS：

.hidden {
    visibility:hidden
}

我尝试过使用 opacity: 0 但我仍然遇到同样的问题。

【问题讨论】：

【解决方案1】：

你不能用鼠标点击隐藏的元素。要么你必须从代码中触发点击事件，要么使用opacity 属性来代替：

$('.hidden').click(function() {
    alert('hidden was clicked');
});

$('div').click(function() {
    alert('div was clicked');
});

div {
    background-color:red;
    width:100px;
    height:100px;
}

.hidden {
    opacity:0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hidden"></div>
<div></div>

【讨论】：

@souzan, I have tried using opacity: 0 but I still have the same issue.--------- 你可以运行 sn-p 看看代码是如何与opacity:0一起工作的。
它适用于 sn-p 但不适用于我的 svg 代码。不幸的是，该图包含 1000 多行 svg 代码，我不能在这里分享。
@souzan，如果我们无法解决这个问题，那么很难找到解决方案............谢谢。
@souzan，如果您分享解决方案会很好，以便我可以为该帖子的未来读者更新答案......谢谢。
我在自己的答案中发布了它，基本上 opacity: 0 必须添加到单个

【解决方案2】：

我已经检查了opacity 属性。它工作正常。

.hidden {
    opacity:0;
}

【讨论】：

【解决方案3】：

我通过将 opacity: 0 添加到单个 svg 元素（<path>, <rect> 等）而不是将其添加到 svg 本身来解决了这个问题。

【讨论】：