今天项目中的需求,是在一个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元素可以响应与鼠标相关的事件,如`mouseover`、`mouseout`、`mousedown`、`mouseup`和`click`。例如,我们可以为一个SVG元素添加点击事件监听器,当用户点击该元素时,执行特定的JavaScript函数: ```html ('...
SVG元素同样支持HTML中的大部分鼠标事件,如`click`(点击)、`mouseover`(鼠标移入)、`mouseout`(鼠标移出)、`mousedown`(鼠标按键按下)和`mouseup`(鼠标按键释放)等。 1. `click`事件:当用户对SVG元素...
例如,可以监听SVG元素的`mouseover`和`mouseout`事件来显示和隐藏tooltip: ```html <svg> </svg> ;">这是一个圆形 document.getElementById('myCircle').addEventListener('mouseover', function() { ...
同时,它也支持对已有SVG元素进行变换(如平移、缩放、旋转)、填充和描边、添加文本等操作。 饼状图、柱状图和折线图是数据可视化的常见图表类型。在Snap.svg.js的帮助下,你可以轻松实现这些图表的动态创建。饼状...
SVG元素可以绑定各种事件监听器,如`click`、`mouseover`等。在描述中提到的左右键单击事件处理,可以这样实现: ```javascript rect.addEventListener('click', (event) => { if (event.button === 0) { // 左键...
学习SVG对于前端开发者来说非常有价值,因为现代浏览器对SVG支持良好,而且它提供了丰富的图形绘制和交互能力。通过深入理解SVG的基本元素和结合JavaScript的使用,你可以创建出富有创意且功能强大的网页图形应用。
HTML5引入了内联SVG支持,使得开发者可以直接在HTML文档中嵌入SVG代码,从而在网页设计中实现丰富的图形元素。 创建SVG图形的基本结构包括`<svg>`标签,它定义了一个SVG画布。例如: ```html <svg width="200" ...
对于鼠标覆盖事件,可以使用SVG的`mouseover`和`mouseout`事件。当鼠标移动到特定区域(如省份或城市)上方时,可以显示相关信息,如名称、人口等;当鼠标移开时,隐藏这些信息。如果需要更复杂的交互,还可以结合...
这通常通过JavaScript实现,例如监听`mouseover`和`click`事件,根据事件触发相应的回调函数。这些函数可以修改SVG元素的属性,如改变颜色、添加阴影,或者展示额外信息。 SVGMap压缩包内的文件可能是示例地图的SVG...
接着,SVG作为矢量图形格式,其优点在于无论放大多少倍都能保持清晰,且支持内联样式,易于与CSS结合。在SVG中,我们可以用`<text>`标签创建文字,通过`font-size`, `font-family`等属性调整字体大小和类型。同时,...
7. **事件处理**:SVG图形可以绑定JavaScript事件,如点击(click)、鼠标悬浮(mouseover)等,实现交互功能。例如,`onclick="myFunction()"`可以在用户点击元素时执行特定函数。 8. **滤镜(Filters)**:SVG...
Raphael.js是一个JavaScript库,它提供了在SVG和VML(对于老版本的IE浏览器)之间无缝切换的能力,使得开发者可以在所有现代浏览器以及那些不支持SVG的浏览器中使用矢量图形。在这个案例中,Raphael.js被用来处理SVG...
4. **交互性**:`pie.js`可能还包括添加交互性的功能,比如`mouseover`和`mouseout`事件来改变鼠标悬停时的视觉效果,或者`click`事件来触发特定的交互,如显示详细信息。 5. **数据绑定**:在`index.jsp`或HTML文件...
HTML5和SVG技术在网页开发中的应用越来越广泛,它们为创建动态、交互式的网页内容提供了强大的支持。在这个项目中,“HTML5+SVG实现的可爱娃娃笑脸动画”巧妙地结合了这两种技术,创造出了一个生动有趣的用户体验。 ...
这通常会涉及到事件监听器,如`mouseover`和`mouseout`,以及改变CSS属性值来更新滤镜效果。例如,开发者可能会使用`document.querySelector`或`document.querySelectorAll`选择需要应用滤镜效果的元素,然后在事件...
7. **触屏支持**:对于手机和平板等触屏设备,需要将`mouseover`和`mouseout`替换为`touchstart`和`touchend`事件,以实现触屏操作的交互效果。 8. **优化性能**:在处理大量数据或复杂动画时,可能需要使用...
HTML5和SVG(Scalable Vector Graphics)是现代网页开发中的核心技术,它们为创建交互式、动态和高质量的视觉效果提供了强大的支持。在本主题中,"html5 svg饼状图形统计动画特效",我们将深入探讨如何利用这两种...
5. **兼容性**:此示例在IE 6.0 + Adobe SVG Viewer 3.03中文版下测试通过,需要注意的是,不同的浏览器对SVG支持程度可能不同,需要考虑兼容性问题。 这样的交互机制在富互联网应用(RIA)中非常有用,特别是在...
SVG是一种用于描述2D图形的标记语言,它支持矢量图,这意味着图形可以在任何分辨率下保持清晰,非常适合用于网页设计中的图标和图形。 在这个特效中,SVG被用来构建圆形的导航菜单结构,每个菜单项都是一个可缩放的...
`mouseover`和`mouseout`事件监听器用于控制详细数据的显示和隐藏。 4. **SVG路径数据**:`<path>`元素的`d`属性定义了图形的路径。对于饼状图,这通常包括一个移动指令(`M`),然后是一系列线和弧的绘制指令(`L`...