javascript – SVG元素不接收Opera和IE中的事件

前端之家收集整理的这篇文章主要介绍了javascript – SVG元素不接收Opera和IE中的事件前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个网页,其中有IMG元素上面的SVG应该在它上面绘制形状.

绘图在浏览器中正确执行.但是当涉及到接收事件时,IMG实际上似乎阻止了事件/接收它(它没有自己附加的任何事件,所以它没有被显式停止).

例:
http://jsfiddle.net/UvRVX/12/(固定标记,添加圆圈)
FF,Chrome:“svg收到了mousedown”(正确)
Opera,IE9: – 没什么 – (不正确)

当通过CSS可见性或display:none隐藏图像时,它开始工作,但这种方式当然不能使用.

如何将SVG元素放在IMG元素之上以便它可以接收事件? (在Opera中,IE9)
谢谢

解决方法

造成这种情况的原因有两个:

1. svg是空的.
即使你给它一个高度和宽度,我相信有些浏览器不会给它分配一个真正的大小,直到你实际添加一个形状.你可以通过在那里放置一个空矩形来解决这个问题:

< rect x =“0”y =“0”width =“300”height =“300”stroke =“black”stroke-width =“0”fill =“none”>< / rect>

2.由于指针事件属性.你可以阅读更多here.默认情况下,它的值是visiblePainted,所以我真的不知道为什么Chrome和FF允许事件通过.你需要把它设置为“全部”

还要小心html,这是非常冷淡的.

固定:

http://jsfiddle.net/mihaifm/ptLrB/2/

原文链接:https://www.f2er.com/js/240732.html

猜你在找的JavaScript相关文章