html5 svg 中元素点击事件添加方法

假行僧0life

假行僧0life

2016-02-19 11:16

生活已是百般艰难,为何不努力一点。下面图老师就给大家分享html5 svg 中元素点击事件添加方法,希望可以让热爱学习的朋友们体会到设计的小小的乐趣。
最近在用svg的点击事件做东西,之所以用svg而不用canvas就是因为svg内的元素可以添加点击事件,他们之间详细的区别如下:
Canvas 与 SVG 的比较(详见)
下表列出了 canvas 与 SVG 之间的一些不同之处。

Canvas
•依赖分辨率
•不支持事件处理器
•弱的文本渲染能力
•能够以 .png 或 .jpg 格式保存结果图像
•最适合图像密集型的游戏,其中的许多对象会被频繁重绘

SVG
•不依赖分辨率
•支持事件处理器
•最适合带有大型渲染区域的应用程序(比如谷歌地图)
•复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快)
•不适合游戏应用

做出的网页在chorme下可以正常使用,因为要支持移动设备,在android上测试也正常,但是在ipad上打开页面时发现点击事件不管用了,查了很多资料,没有找到问题原因,后来查到w3c中对于svg的描述的demo的确可以实现点击的效果,对比代码,发现自己使用的jquery给svg的元素添加的点击事件,而在svg的元素中没有 onclick="circle_click(evt)"类似描述,添加上onclick="click(evt)"果然在ipad上svg的元素有了点击事件
展开更多 50%)
分享

猜你喜欢

html5 svg 中元素点击事件添加方法

Web开发
html5 svg 中元素点击事件添加方法

HTML5 新事件 小结

Web开发
HTML5 新事件 小结

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

HTML5之SVG 2D入门7—SVG元素的重用与引用

Web开发
HTML5之SVG 2D入门7—SVG元素的重用与引用

html5拖曳操作 HTML5实现网页元素的拖放操作

Web开发
html5拖曳操作 HTML5实现网页元素的拖放操作

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

HTML5中Canvas与SVG的画图原理比较

Web开发
HTML5中Canvas与SVG的画图原理比较

HTML5之SVG 2D入门12—SVG DOM及DOM操作介绍

Web开发
HTML5之SVG 2D入门12—SVG DOM及DOM操作介绍

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

Win10系统怎么彻底关闭IE浏览器

Win10系统怎么彻底关闭IE浏览器

html5 Canvas画图教程(9)—canvas中画出矩形和圆形

html5 Canvas画图教程(9)—canvas中画出矩形和圆形
下拉加载更多内容 ↓