Преобразование координат в SVG внутри Firefox с помощью полос прокрутки
-
27-09-2019 - |
Вопрос
Я пытаюсь вычислить правильные координаты мыши в пространстве координат пользователя в SVG-документе из кода Javascript, когда появляются полосы прокрутки при просмотре этого SVG-файла из FireFox.Но это не совсем правильно.Это необходимо для корректного отображения всплывающих подсказок на основе SVG, даже если SVG прокручивается по горизонтали или вертикали.
Я хочу, чтобы преобразования координат были правильными в браузерах IE и Firefox.Кроме того, я хочу сделать это с помощью решения Javascript + SVG с одним исходным кодом, которое, надеюсь, не требует специфичного для браузера условного кода.В настоящее время я использую FireFox 3.5.10, но я бы подумал об обновлении до более поздней версии FireFox, и я еще не тестировал IE.
Проблема, с которой я столкнулся, заключается в смещении координат для полос прокрутки:Преобразование координат мыши недостаточно, когда над элементом SVG в Firefox появляются полосы прокрутки.В качестве средства отладки для определения преобразований координат я работаю с простым SVG-файлом, который содержит обработчики Javascript, все в одном файле, который просто рисует перекрестие при наведении курсора мыши в виде линейных объектов SVG.Найдите его опубликованным по адресу svg_cross_hairs.svg.Если вы загрузите этот файл в FireFox и сократите окно FireFox до появления полос прокрутки, а затем прокрутите вертикальные или горизонтальные полосы прокрутки, вы обнаружите, что перекрестия, нарисованные Javascript, смещены на величину горизонтальной или перемещаемой по вертикали прокрутки, что неверно для того, чтобы нарисовать объект всплывающей подсказки на том месте, где фактически находится курсор мыши, или рядом с ним.
Я действительно вижу Firefox:Получить координаты с помощью мыши верхнего левого угла окна просмотра вопрос, который говорит о Вершина прокрутки собственность.
сообщение №00056 разъясняет, что существует путаница в значениях element.{pageX,pageY,clientX,clientY}
атрибуты и element.getscreenCTM
способ.
Есть ли более чистый способ получить правильную координату мыши в системе координат пользователя?
Решение
Вы можете использовать evt.pageX
/ evt.pageY
или window.pageXOffset
/ window.pageYOffset
чтобы получить что-то, что работает, даже если svg прокручивается.