D3.js safari 中的鼠标滚轮无法缩放
D3.js zoom is not working with mousewheel in safari
我正在使用 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 中的左侧和顶部区域具有有效缩放）：
我得到了 mbostock 的答复：
问题：
如 https://jsfiddle.net/vbabenko/5shshq97/7/ 所示，这是一个 Safari bug（或者，如果您愿意，也可以是规范的另一种解释）。当指针下没有 SVG 内容时，Safari 不会向 SVG 派发滚轮事件；事件被发送到 SVG 元素下面的任何地方（在本例中为 body）。相比之下，其他浏览器将滚轮事件分派到 SVG 元素在其边界矩形内的任何位置。
解决方案：
如果你想让SVG在所有浏览器上都接收到事件，你必须在SVG中放一些内容来捕获wheel事件。这是一个固定的测试用例：https://bl.ocks.org/mbostock/9e3fed7a5904991e7973a87628d9f84d
原始讨论：
我正在使用 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 中的左侧和顶部区域具有有效缩放）：
我得到了 mbostock 的答复：
问题：
如 https://jsfiddle.net/vbabenko/5shshq97/7/ 所示，这是一个 Safari bug（或者，如果您愿意，也可以是规范的另一种解释）。当指针下没有 SVG 内容时，Safari 不会向 SVG 派发滚轮事件；事件被发送到 SVG 元素下面的任何地方（在本例中为 body）。相比之下，其他浏览器将滚轮事件分派到 SVG 元素在其边界矩形内的任何位置。
解决方案：
如果你想让SVG在所有浏览器上都接收到事件，你必须在SVG中放一些内容来捕获wheel事件。这是一个固定的测试用例：https://bl.ocks.org/mbostock/9e3fed7a5904991e7973a87628d9f84d
原始讨论：