В окне просмотра 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>
Попробуйте сделать это на chrome, safari и firefox.Обратите внимание, что вы получите разные результаты в каждом браузере.Результаты chrome и safari не имеют смысла, и Firefox вычисляет без учета состояния области просмотра.Есть ли решение этой проблемы?