SVG не распознает указатели-события: нет

У меня есть верхний слой с прозрачным набором фоновых изображений и хотелось бы, чтобы все события указателя были проигнорированы. Поэтому изначально у меня было настроено с <div style="pointer-events"></div>, которое отлично поработало, но потом я узнал, что IE не поддерживает это.

Дальнейшее чтение Я нахожу несколько мест, в которых говорится, что IE поддерживает <svg> с помощью pointer-events:none, но я не могу заставить его работать (я никогда не использовал теги SVG, чтобы я мог делать все это неправильно).

Пожалуйста, посмотрите на эту очень упрощенную скрипку того, чего я надеюсь достичь. http://jsfiddle.net/AGVTM/

Ответ 1

Элемент root (top most) <svg> не поддерживает pointer-events: none. Причина этого заключается в том, что это возможный эксплойт безопасности, вы можете использовать кнопку Facebook Like с SVG и пропускать клики, как в этом примере http://jsfiddle.net/rVxTn/

Если элемент SVG не является root, тогда клики должны пройти. Этот пример должен работать на IE9 (untested)

http://jsfiddle.net/DLEsn/

Однако это не решает вашу проблему, потому что вы не можете помещать элементы HTML внутри элемента SVG.

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

Ответ 2

Корневая причина

Абсолютно позиционированные SVG не будут распространять клики на HTML-элементы в IE9.

См. это обсуждение тестового примера webkit: REGRESSION (r66731): в некоторых случаях события-указатели разбиваются, а соответствующий минимальный тестовый сценарий. Смысл, интересно, эта ошибка почти дошла до WebKit, но была исправлена вовремя.

В случае IE 9 результаты:

IE 9.0.8112.16421 = сбой тест 1: плавающий; проходит тест 2: встроенный

Обходные

См. этот пост StackOverflow при имитации pointer-events: none - Как заставить Internet Explorer эмулировать указатели-события: нет?

Они обсуждают в первую очередь не-SVG-элементы, но метод пересылки кликов на базовые элементы также может применяться в вашем случае.