似乎在较新版本的Firefox中(不支持v34和v35的版本),不考虑SVG对象属性“指针事件”的“可见”值。

我在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在这里: http : //jsfiddle.net/d9uqo33j/,您可以通过在Firefox中单击可见图像下面的内容进行复制。

是否知道为什么会这样,或者如何从Firefox中获得预期的行为? 它尊重指针事件=“ none”,但是在很多地方我可能会切换可见性,我宁愿不依赖于每次切换图像可见性时都要记住重置指针事件或鼠标处理程序。

#1楼 票数:1

您可以使它们显示为“ none”,直到我修复错误为止。

#2楼 票数:0

看起来这实际上是Firefox中的回归:

D3事件在隐藏的svg元素上触发

https://bugzilla.mozilla.org/show_bug.cgi?id=1119698

  ask by Brian translate from so

未解决问题?本站智能推荐:

1回复

svg中的Firefox中的onmouseover事件

heve在这里寻找答案,但是没有成功。 因此,我在html页面中有一个svg ,我想通过这种方式捕获onmouseover事件: 在Chrome中可用的文件。 为了在FF中使用它,我尝试使用Yahoo dom事件库。 使用它,我可以在FF中捕获此事件,但不能在svg event i
1回复

当您更改指针事件时,Svgtexpath在Firefox中消失

document.getElementById('frame-5416779E-782A-462E-AEC1-2FBCA08DAF42').onmouseover = function(){ this.style.pointerEvents = 'all'; }; <div id=
2回复

D3事件在隐藏的svg元素上触发

我似乎无法找到答案,我花了一段时间才把它重新创建为独立的小提琴/笔,但我终于有了。 我正在研究使用D3绘制和操作svg图形的Vaadin应用程序。 在某一点上,屏幕上有svg的visibility:hidden 。 这适用于所有浏览器。 这些隐藏元素具有click和mouseove
2回复

SVG鼠标事件在Firefox4中起作用,但在IE8中不起作用

我有一个独立的SVG文件和一个单独的Javascript文件,用于处理从SVG文件触发的鼠标事件。 该项目在Firefox上运行良好,但是在管理鼠标事件时我以某种方式遇到了IE问题:我收到此错误消息: “ clientx为空或不是对象 ”。 SVG图像虽然可以打印。 您是否知道我
1回复

SVG符号不会触发onload事件(仅在firefox中)。我正在寻找解决方法

我正在一个项目中与D3.js一起使用SVG绘制图表。 该图使用SVG符号。 而且我有JavaScript代码,可以通过onload事件管理这些项目。 在Webkit引擎之类的浏览器中,浏览器运行得很好。 但是Firefox ... Firefox不会在SVG中运行任何onload事件。
1回复

SVG元素不继承Firefox中的事件处理程序?

编辑:这是Firefox中的错误,如果不直接编辑Firefox就无法解决,这是我不想做的。 我认为这个问题已解决,目的是要向其他人求他。 我正在尝试使用SVG创建基于像素的绘图程序。 我在<defs>内的几个<polygon>上初始化事件处理程序,然后用<u
1回复

防止Firefox在鼠标中键单击时在新选项卡中打开svg图像

我目前正在开发一个JavaScript项目,在其中我使用Paper.image函数将svg图像放在RaphaelJS svg画布上(请参阅此处: http ://raphaeljs.com/reference.html#Paper.image)。 对于某些操作,用户必须单击鼠标中键。 但是,
3回复

Firefox3.5在SVG上支持的Javascript事件处理程序

我整整一整天都在动脑筋。 看来Firefox 3.5支持的SVG DOM操作非常有限。 一些诸如this.style.cursor的属性可以使用onmouseover处理程序成功进行操作,但是诸如this.style.fill或this.style.stroke之类的有趣属性则不能! 有