对于SVG对象属性“pointer-events”的“可见”值似乎未在较新版本的Firefox中得到遵守(已针对v34和v35进行了确认)。
我在SVG中嵌入了以下定义的图像:
<image x="10" y="10" id="svg-image1" width="300" height="200" xlink:href="http://css-plus.com/examples/2012/03/gaussian-blur/i/fence.jpg" />
<image x="10" y="210" id="svg-image2" width="300" height="200" xlink:href="http://css-plus.com/examples/2012/03/gaussian-blur/i/fence.jpg" pointer-events="visible" visibility="hidden" />
第二个在绘制时不显示在SVG中可见,但是当点击第二个图像占用的区域时,单击事件将被触发。我已经确认Chrome有预期的行为,如果指针事件设置为“可见”,则不会触发隐藏元素上的点击事件,但会触发第一个图像的点击事件。
JSFiddle here:http://jsfiddle.net/d9uqo33j/您可以通过点击Firefox中的可见图片下方来重现。
知道为什么会这样或者如何从Firefox中获得预期的行为?它尊重指针事件=“无”,但有很多地方我可能切换可见性,我宁愿不依赖于每次切换图像可见性时记住重置指针事件或鼠标处理程序。