在野生动物园

Question

我使用D3 v4来实现缩放功能，一切都在FireFox，Chrome浏览器上完美运行。

使用Safari浏览器的行为完全不同（我的版本为Version 10.0.1 (12602.2.14.0.7)）。轮缩放适用于g元素，不适用于svg元素。注意：dbClick缩放适用于svg元素。

我创建了简单的fiddle example，试图重现这个问题。 如果您尝试使用red rect进行滚轮缩放 - 它将在rect之外工作 - 不起作用，但适用于其他浏览器。

我一直在寻找像https://bl.ocks.org/mbostock/db6b4335bf1662b413e7968910104f0f这样的官方例子，其中一切正常，我找不到我的例子的问题......

以下是缩放工作区域（疯狂是左侧，svg中的顶部区域具有工作缩放）：

Answer 1

我从mbostock得到答案：

<强>问题：

如https://jsfiddle.net/vbabenko/5shshq97/7/所示，这是Safari bug（或者，如果您愿意，可以是对规范的替代解释）。当指针下没有SVG内容时，Safari不会将轮事件分派给SVG;事件被发送到SVG元素下面的任何内容（本例中为正文）。相比之下，其他浏览器将轮事件分派到其边界矩形内的任何位置的SVG元素。

<强> SOLUTION：

如果您希望SVG在所有浏览器上接收事件，您必须在SVG中放置一些内容以捕获滚轮事件。这是一个固定的测试用例：https://bl.ocks.org/mbostock/9e3fed7a5904991e7973a87628d9f84d

原始讨论：

https://github.com/d3/d3/issues/3035