Как разрешить нажатия на дочерний элемент SVG с видимостью: скрытый?

Question

У меня есть сложная SVG-диаграмма, которая имеет постоянные проблемы с рендерингом в Edge (части диаграммы мерцают, исчезают и т. Д. Через случайные интервалы.) Я исправил это (вроде), постоянно добавляя и удаляя «видимость: скрытый» вродительское отделениеЭто «исправляет» макет после его разрыва (но не останавливает его от повторного разрыва).

Скрытое видимое изменение происходит достаточно быстро, что визуально, нет никакой разницы, и диаграмма не исчезает изpage.

Моя проблема заключается в том, что пользователям необходимо щелкнуть диаграмму, чтобы получить дополнительную информацию, и пропустить события щелчков, если они происходят, когда элемент имеет видимость: скрытый установлен на него (даже если он кажется видимым).).

Как разрешить клики по элементу с надписью «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

Я решил проблему, добавив непрозрачность: 0 к отдельным элементам SVG (<path>, <rect> и т. Д.) Вместо добавления его к самой SVG.

Answer 3

Я проверил с opacity свойство.Работает нормально.

.hidden {
    opacity:0;
}