Неверное значение события click layerX для элемента svg foreignObject
В окне просмотра svg увеличено состояние (ширина svg больше, чем ширина окна просмотра). Неверное свойство layerX события click для внешнего объекта в Safari и Chrome. В следующем пример щелкните по центру желтого прямоугольника и посмотрите вывод консоли.
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width">
<title>JS Bin</title>
</head>
<body style = "margin:0">
<svg viewBox = "0 0 200 200" style = "height: 400px; width: 400px;" xmlns = "http://www.w3.org/2000/svg">
<rect width = "100%" height = "100%" fill = "red"/>
<foreignObject x = "50" y = "50" width = "100" height = "100">
<div style = "background-color: yellow; width: 100px; height:100px;">
</div>
</foreignObject>
</svg>
</body>
</html>
Попробуйте на хроме, сафари и фаерфоксе. Обратите внимание, что вы получите разные результаты в каждом браузере. Результаты хрома и сафари бессмысленны, а Firefox вычисляет без учета состояния области просмотра. Есть ли обходной путь для этой проблемы?
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
7
1
205
1
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 1
Ответ принят как подходящий
Хитрость заключается в том, чтобы не использовать layerX , вместо этого используйте
event.clientX - rect1.getBoundingClientRect().left
Я обновил пример, чтобы он работал правильно. Теперь я получаю стабильный результат среди Chrome, Firefox и Safari.
Другие вопросы по теме
Приложение Vue не обновляется при нажатии клавиши ввода в адресной строке Firefox
При двойном щелчке событие не вызывает вызов отключенного текстового поля ввода в Firefox
Firefox требует некоторых пользовательских медиа для вызова WebRTC
Альтернативные таблицы стилей не отображаются в разделе «Просмотр > Стиль страницы» в Firefox
Как преобразовать букмарклет Firefox в веб-расширение или дополнение?
Ширина ячеек таблицы не складывается правильно в Firefox
Есть ли способ сделать gecko.driver доступным для всех в общем коде?
Проверить строку на соответствие числу/числу с плавающей запятой
Как удалить пунктирную белую рамку вокруг выделенного текста кнопки
Почему и как Firefox показывает, что его пользователь находится в приватном режиме?
Похожие вопросы
Когда я делаю загрузку с помощью веб-драйвера, я получаю сообщение «Ошибка загрузки — ошибка загрузки»
Как указать `application/json` Content-Type, не вызывая предварительный запрос Chrome CORS?
CSS Scroll-Snaps переполняет тело при достижении вершины
CSS: Медиа-запрос вызывается, когда он явно не должен
Как исправить мою отложенную петлю, которая застряла через 5 секунд?
Поместите курсор в поле ввода номера при нажатии вкладки
Ошибка аудита доступности, когда у элемента ol есть роль
Как заставить npm запускать открытый хром в режиме инкогнито или просто избегать кэширования во время разработки?
Chrome отказывается отправлять Accept-Encoding gzip (даже без CORS)
Как решить, не удалось декодировать текстовый фрейм как UTF 8, хотя повысить веб-сокет
layerX нестандартен. Вы должны использовать что-то другое. developer.mozilla.org/en-US/docs/Web/API/UIEvent/layerX