Ara*_*ian 7 safari firefox svg google-chrome
在 svg 视口放大状态（大于视口宽度的 svg 宽度）。Safari 和 Chrome 上的 foreignObject 单击事件 layerX 属性不正确。在以下示例中，单击黄色矩形的中心并查看控制台输出。
<!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 计算时不考虑视口状态。这个问题有什么解决方法吗？
技巧是不使用 layerX ，而是使用
event.clientX - rect1.getBoundingClientRect().left
我更新了示例以使其正常工作。现在我在 chrome、firefox 和 safari 中得到了一致的结果。
| 归档时间： |
|
| 查看次数： |
187 次 |
| 最近记录： |