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

Question

我有一个复杂的SVG图，该图在Edge中存在持续的渲染问题（图的某些部分以随机间隔闪烁，消失等）。我通过不断地向其添加和删除“ visibility：hidden”来修复它（某种）。上级一旦布局破裂，就会“修复”布局（但不会阻止其再次破裂）。

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

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

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

这里是一个小提琴：http://jsfiddle.net/kmbgp95a/

涉及的主要CSS：

.hidden {
    visibility:hidden
}

我尝试使用不透明度：0，但仍然存在相同的问题。

Answer 1

您无法使用鼠标单击隐藏的元素。您必须通过代码触发click事件，或者改为使用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>

Answer 2

我已经检查过opacity属性。一切正常。

.hidden {
    opacity:0;
}

Answer 3

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