Зачем использовать «прямоугольник слушателя» для настройки масштабирования в d3?

Question

У меня есть визуализация d3 (v5), состоящая из структуры DOM, которая более или менее похожа на svg > g > etc.Я настроил слушатель масштабирования на svg следующим образом:

this.svg.call(this.zoom.scaleExtent([1/2, 40]).on("zoom" zoomed))

В обработчике «zoom» я преобразую базовый узел g, который является прямым потомком svg.Я вижу много примеров и учебных пособий, которые устанавливают rect с единственной целью захвата событий мыши.Я видел учебники, которые делают это, несмотря на наличие svg, которое уже покрывает поверхность области просмотра.Почему rect необходимо / полезно?Почему бы просто не использовать svg?

Answer 1

Это самый безопасный способ убедиться, что события мыши регистрируются во всем окне просмотра.Когда происходит событие мыши, браузер выполнит тестирование удара , чтобы определить, какой элемент становится целью этого события.Важно понимать, что только графические элементы рассматриваются во время тестирования на попадание, и, таким образом, ни <svg>, ни <g> элементы не могут становиться прямыми объектами событий мыши, хотя событие может в конечном итоге достичь их, когда онопузыри до него.

Если у вас был автономный SVG (то есть тот, который не является частью дерева HTML DOM), спецификация строго определяет:

Обратите внимание, что 'svg'элемент не является графическим элементом, и в соответствующем автономном файле SVG самый корневой элемент 'svg' никогда не будет целью событий указателя, хотя события могут пузыриться к этому элементу.

Вещинемного отличается для встроенных документов SVG, однако:

Эта спецификация не определяет поведение событий указателя на самом корневом элементе 'svg' для изображений SVG, которые встроены посредством ссылки или включения в другой документ,например, перехватывает ли самый корневой элемент 'svg', встроенный в документ HTML, события щелчка мышью;будущие спецификации могут определять это поведение, но для целей данной спецификации это поведение зависит от реализации.

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