`
换个号韩国红果果
  • 浏览: 48032 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类

svg, 支持mouseover

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


但是在火狐下面测试发现。使用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的
  • 大小: 72.3 KB
分享到:
评论

相关推荐

    SVG Demo.rar

    SVG元素可以响应与鼠标相关的事件,如`mouseover`、`mouseout`、`mousedown`、`mouseup`和`click`。例如,我们可以为一个SVG元素添加点击事件监听器,当用户点击该元素时,执行特定的JavaScript函数: ```html ('...

    svg小例子(主要是鼠标事件)

    SVG元素同样支持HTML中的大部分鼠标事件,如`click`(点击)、`mouseover`(鼠标移入)、`mouseout`(鼠标移出)、`mousedown`(鼠标按键按下)和`mouseup`(鼠标按键释放)等。 1. `click`事件:当用户对SVG元素...

    svg添加不同效果的提示信息

    例如,可以监听SVG元素的`mouseover`和`mouseout`事件来显示和隐藏tooltip: ```html &lt;svg&gt; &lt;/svg&gt; ;"&gt;这是一个圆形 document.getElementById('myCircle').addEventListener('mouseover', function() { ...

    svg加snap.svg.js能做出饼状图,柱状图,折线图,svg事件和js事件的结合,svg坐标

    同时,它也支持对已有SVG元素进行变换(如平移、缩放、旋转)、填充和描边、添加文本等操作。 饼状图、柱状图和折线图是数据可视化的常见图表类型。在Snap.svg.js的帮助下,你可以轻松实现这些图表的动态创建。饼状...

    svg移动+缩放+拖动添加+事件

    SVG元素可以绑定各种事件监听器,如`click`、`mouseover`等。在描述中提到的左右键单击事件处理,可以这样实现: ```javascript rect.addEventListener('click', (event) =&gt; { if (event.button === 0) { // 左键...

    一些简单的svg小例子

    学习SVG对于前端开发者来说非常有价值,因为现代浏览器对SVG支持良好,而且它提供了丰富的图形绘制和交互能力。通过深入理解SVG的基本元素和结合JavaScript的使用,你可以创建出富有创意且功能强大的网页图形应用。

    html5 svg创建粘性动画特效

    HTML5引入了内联SVG支持,使得开发者可以直接在HTML文档中嵌入SVG代码,从而在网页设计中实现丰富的图形元素。 创建SVG图形的基本结构包括`&lt;svg&gt;`标签,它定义了一个SVG画布。例如: ```html &lt;svg width="200" ...

    基于h5+svg制作的自定义地图实现拖拽、缩放、鼠标覆盖等事件

    对于鼠标覆盖事件,可以使用SVG的`mouseover`和`mouseout`事件。当鼠标移动到特定区域(如省份或城市)上方时,可以显示相关信息,如名称、人口等;当鼠标移开时,隐藏这些信息。如果需要更复杂的交互,还可以结合...

    SVG Map教程(有demo)

    这通常通过JavaScript实现,例如监听`mouseover`和`click`事件,根据事件触发相应的回调函数。这些函数可以修改SVG元素的属性,如改变颜色、添加阴影,或者展示额外信息。 SVGMap压缩包内的文件可能是示例地图的SVG...

    CSS3 SVG 3D立体阴影文字动画特效

    接着,SVG作为矢量图形格式,其优点在于无论放大多少倍都能保持清晰,且支持内联样式,易于与CSS结合。在SVG中,我们可以用`&lt;text&gt;`标签创建文字,通过`font-size`, `font-family`等属性调整字体大小和类型。同时,...

    svg操作文档.rar

    7. **事件处理**:SVG图形可以绑定JavaScript事件,如点击(click)、鼠标悬浮(mouseover)等,实现交互功能。例如,`onclick="myFunction()"`可以在用户点击元素时执行特定函数。 8. **滤镜(Filters)**:SVG...

    利用SVG图片的路径生成的湖北省地图

    Raphael.js是一个JavaScript库,它提供了在SVG和VML(对于老版本的IE浏览器)之间无缝切换的能力,使得开发者可以在所有现代浏览器以及那些不支持SVG的浏览器中使用矢量图形。在这个案例中,Raphael.js被用来处理SVG...

    用SVG实现的统计饼图

    4. **交互性**:`pie.js`可能还包括添加交互性的功能,比如`mouseover`和`mouseout`事件来改变鼠标悬停时的视觉效果,或者`click`事件来触发特定的交互,如显示详细信息。 5. **数据绑定**:在`index.jsp`或HTML文件...

    HTML5+SVG实现的可爱娃娃笑脸动画

    HTML5和SVG技术在网页开发中的应用越来越广泛,它们为创建动态、交互式的网页内容提供了强大的支持。在这个项目中,“HTML5+SVG实现的可爱娃娃笑脸动画”巧妙地结合了这两种技术,创造出了一个生动有趣的用户体验。 ...

    简单的滤镜文字svg特效.zip

    这通常会涉及到事件监听器,如`mouseover`和`mouseout`,以及改变CSS属性值来更新滤镜效果。例如,开发者可能会使用`document.querySelector`或`document.querySelectorAll`选择需要应用滤镜效果的元素,然后在事件...

    SVG图片剪辑路径鼠标悬停效果.zip

    7. **触屏支持**:对于手机和平板等触屏设备,需要将`mouseover`和`mouseout`替换为`touchstart`和`touchend`事件,以实现触屏操作的交互效果。 8. **优化性能**:在处理大量数据或复杂动画时,可能需要使用...

    html5 svg饼状图形统计动画特效

    HTML5和SVG(Scalable Vector Graphics)是现代网页开发中的核心技术,它们为创建交互式、动态和高质量的视觉效果提供了强大的支持。在本主题中,"html5 svg饼状图形统计动画特效",我们将深入探讨如何利用这两种...

    SVG与html的交互(svg的js与html的js互调用)[参照].pdf

    5. **兼容性**:此示例在IE 6.0 + Adobe SVG Viewer 3.03中文版下测试通过,需要注意的是,不同的浏览器对SVG支持程度可能不同,需要考虑兼容性问题。 这样的交互机制在富互联网应用(RIA)中非常有用,特别是在...

    基于SVG的超酷圆形导航菜单特效

    SVG是一种用于描述2D图形的标记语言,它支持矢量图,这意味着图形可以在任何分辨率下保持清晰,非常适合用于网页设计中的图标和图形。 在这个特效中,SVG被用来构建圆形的导航菜单结构,每个菜单项都是一个可缩放的...

    HTML5 SVG饼状图文字描述代码.zip

    `mouseover`和`mouseout`事件监听器用于控制详细数据的显示和隐藏。 4. **SVG路径数据**:`&lt;path&gt;`元素的`d`属性定义了图形的路径。对于饼状图,这通常包括一个移动指令(`M`),然后是一系列线和弧的绘制指令(`L`...

Global site tag (gtag.js) - Google Analytics