svg, 支持mouseover

最新推荐文章于 2025-02-26 10:27:57 发布

原创最新推荐文章于 2025-02-26 10:27:57 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

web 同时被 2 个专栏收录

25 篇文章

订阅专栏

web css

4 篇文章

订阅专栏

本文介绍了一个解决SVG元素mouseover事件在Firefox浏览器中不兼容的问题。通过使用一个覆盖在SVG元素上的div来实现mouseover事件监听，并详细解释了如何动态设置此div的位置和尺寸。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天项目中的需求，是在一个fill后的svg path上面加上一个mouseover事件。
鼠标移上去显示最近的数字。

[img]http://dl2.iteye.com/upload/attachment/0122/4985/14f70bb1-40d0-3d79-8798-7007053e3b2f.png[/img]
但是在火狐下面测试发现。使用raphael时火狐不支持mouseover,mouseout. 排查了是否是path没有被fill或者toFont 后，发现确实是火狐不支持该事件。
后来想到了一种方法，使用一个div蒙在上面。绑定该div的mouseover事件（div没有兼容性问题）
下面设置蒙的方法。获取svg的宽度高度，和top，left值，然后动态设置css样式即可。


var svg_offset= $( chart_b.id ).find("svg").offset();
			   	 	$(document.body).append("<div id='rect'> ")
			   	 	var div=$("#rect").css({
			   	 		position:"absolute",
			   	 		width:this.realW,
			   	 		height:this.realH,
			   	 		id:"rect",
			   	 		left:svg_offset.left+c.padding[3],
			   	 		top:svg_offset.top+c.padding[0]
			   	 	})

需要注意的几点问题：第一是css才是设置style样式。attr是不行的。
第二：设置absolute。这样才能相对于body进行定位。而不是fixed。是相对于页面document的