У меня есть карта с текстовыми элементами SVG, чтобы назвать местоположения. Я хочу, чтобы местоположения (фигуры) были доступны для кликов, а они есть, но поскольку текстовые элементы находятся поверх них, если кто-то нависает над текстовым элементом и нажимает, то ничего не происходит, потому что форма не была нажата: текстовый элемент был, Как я могу сделать так, чтобы, если щелкнуть текстовый элемент, щелчок идет "через" его и в форму?
Как сделать текстовый элемент SVG "доступным по клику"?
Ответ 1
Mozilla представила для этой цели свойство CSS, называемое указателями-событиями. Первоначально он был ограничен формами SVG, но теперь поддерживается большинством элементов DOM в современных браузерах:
span.label { pointer-events: none; }
Ответ на этот вопрос содержит некоторую полезную информацию о достижении того же результата в старом IE:
Ответ 2
добавьте этот css в текст:
pointer-events: none;
Ответ 3
Если можно сгруппировать формы карты с текстом внутри "<gt> ", элемент, то вы можете прикрепить клик к группе, а не к форме. Выполнение этого также дает дополнительное преимущество преобразований, применяемых к группе, будет применяться как к форме, так и к тексту. Если группировка невозможна, я согласен с тем, что предыдущий ответ определенно ваш лучший снимок. По сути, это происходит так: большинство людей визуализируют щелчок, проникающий вниз через ваш z-индекс, но он не работает таким образом. Щелчок пузырьков вверх через DOM, поэтому, если текст не обрабатывает щелчок, он пузырится до следующего элемента DOM, который является родительской группой или контейнером. Это продолжается вверх, пока не достигнет самого верхнего элемента DOM.