Question

在svg视口上放大状态（svg宽度大于视口宽度）。 foreignObject单击事件layerX属性在Safari和Chrome上不正确。在下面的example中，单击黄色矩形的中心，然后查看控制台输出。

<!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无需考虑视口状态即可进行计算。有没有解决此问题的方法？

Answer 1

诀窍是不使用layerX，而是使用

td

我将示例更新为可以正常工作。现在，我在chrome，firefox和safari中得到了一致的结果。

svg foreignObject元素上的点击事件layerX的值不正确

1 个答案: