События JavaScript на родительском объекте объекта SVG

Question

В настоящее время я работаю над скриптом, который позволяет пользователю встраивать файл JavaScript в документ SVG, чтобы включить панорамирование и масштабирование содержимого. Я пробовал практически все варианты панорамирования и масштабирования SVG, которые я мог найти, и нашел только тот, который поддерживает согласованную кросс-браузер. К сожалению, сценарий был написан с предположением, что SVG будет выписан в HTML, а не встроен через тег объекта. Поскольку я работаю с несколькими предварительно обработанными SVG, было бы более эффективно просто ссылаться на внешний файл JavaScript в каждом SVG. До сих пор все хорошо сочеталось с преобразованием, но я столкнулся с некоторой проблемой. Скрипт опирается на события мыши, ударяющие div, которые обертывают объект SVG. Это выглядит следующим образом:

<div id="svgwindow"> 
    <div id="wrapper"> 
    <object id="svg" data="test.svg" type="image/svg+xml"></object> 
    </div> 
</div> 

примере JavaScript:

parent.document.getElementById("svgwindow").addEventListener("mousewheel", Zoom, false); 

Этот сценарий успешно добавляет событие так долго, как это происходит событие в области svgwindow, что объект SVG не Populating , Как только событие встречается над верхней частью объекта, событие не захватывается. Я не смог найти какие-либо подобные примеры pf, чтобы помочь устранить эту ошибку, поэтому любая помощь будет отличной.

Answer 1

Поскольку <object> тега будет фиксировать все события, и нет никакого способа, чтобы остановить его, все, что вы можете сделать, это поставить другой <div> абсолютно расположенный на верхней части обертки <div>, который будет получать события.

Конечно, если вы замените тег <image>, а не тег <object>, который не будет записывать события, но есть ограничения на изображения, например. все данные должны быть в одном файле, и никакие сценарии не допускаются, что может сделать его непригодным для вас. Если это подходит, то это самый простой способ.