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


Posted in HTML / CSS onJanuary 16, 2013

最近在用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的元素有了点击事件

HTML / CSS 相关文章推荐
a标签的css样式四个状态
Mar 09 HTML / CSS
一款纯css3制作的2015年元旦雪人动画特效教程
Dec 29 HTML / CSS
CSS3实现多背景模拟动态边框的效果
Nov 08 HTML / CSS
CSS3标注引用的出处和来源的方法
Feb 25 HTML / CSS
HTML5表格_动力节点Java学院整理
Jul 11 HTML / CSS
开发人员所需要知道的HTML5性能分析面面观
Jul 05 HTML / CSS
html5读取本地文件示例代码
Apr 22 HTML / CSS
移动端HTML5实现文件上传功能【附代码】
Mar 25 HTML / CSS
浅谈HTML5新增和废弃的标签
Apr 28 HTML / CSS
使用HTML+Css+transform实现3D导航栏的示例代码
Mar 31 HTML / CSS
浅谈CSS不规则边框的生成方案
May 25 HTML / CSS
css清除浮动clearfix:after的用法详解(附完整代码)
May 21 HTML / CSS
html5 Canvas画图教程(11)—使用lineTo/arc/bezierCurveTo画椭圆形
Jan 09 #HTML / CSS
html5 Canvas画图教程(10)—把面拆成线条模拟出圆角矩形
Jan 09 #HTML / CSS
html5 Canvas画图教程(9)—canvas中画出矩形和圆形
Jan 09 #HTML / CSS
html5 Canvas画图教程(8)—canvas里画曲线之bezierCurveTo方法
Jan 09 #HTML / CSS
html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法
Jan 09 #HTML / CSS
html5 Canvas画图教程(6)—canvas里画曲线之arcTo方法
Jan 09 #HTML / CSS
html5 Canvas画图教程(5)—canvas里画曲线之arc方法
Jan 09 #HTML / CSS
You might like
PHP实现的简单网络硬盘
2015/07/29 PHP
php数据结构之顺序链表与链式线性表示例
2018/01/22 PHP
在b/s开发中经常用到的javaScript技术
2006/08/23 Javascript
js 数组的for循环到底应该怎么写?
2010/05/31 Javascript
jQuery.Highcharts.js绘制柱状图饼状图曲线图
2015/03/14 Javascript
JS生成不重复的随机数组的简单实例
2016/07/10 Javascript
AngularJS基础 ng-selected 指令简单示例
2016/08/03 Javascript
Vue响应式原理详解
2017/04/18 Javascript
浅谈angular4生命周期钩子
2017/09/05 Javascript
Bootstrap 3多级下拉菜单实例
2017/11/23 Javascript
Node.js Buffer用法解读
2018/05/18 Javascript
Vue列表渲染的示例代码
2018/11/01 Javascript
微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例
2019/03/30 Javascript
vue-openlayers实现地图坐标弹框效果
2020/09/24 Javascript
Vant 在vue-cli 4.x中按需加载操作
2020/11/05 Javascript
10种检测Python程序运行时间、CPU和内存占用的方法
2015/04/01 Python
python 除法保留两位小数点的方法
2018/07/16 Python
python实现AES加密与解密
2019/03/28 Python
python基于SMTP协议发送邮件
2019/05/31 Python
Python3 无重复字符的最长子串的实现
2019/10/08 Python
Flask之pipenv虚拟环境的实现
2019/11/26 Python
浅谈如何使用python抓取网页中的动态数据实现
2020/08/17 Python
Django生成数据库及添加用户报错解决方案
2020/10/09 Python
MADE法国:提供原创设计师家具
2018/09/18 全球购物
函数指针的定义是什么
2016/08/14 面试题
远程教育心得体会
2014/01/03 职场文书
文明青少年标兵事迹材料
2014/01/28 职场文书
国际贸易专业个人职业生涯规划
2014/02/15 职场文书
2015年先进个人自荐书
2015/03/24 职场文书
公诉意见书范文
2015/06/05 职场文书
同学聚会开幕词
2019/04/02 职场文书
智慧人生:永远不需要向任何人解释你自己
2019/08/20 职场文书
VS2019连接MySQL数据库的过程及常见问题总结
2021/11/27 MySQL
解决Mysql中的innoDB幻读问题
2022/04/29 MySQL
mysql数据库实现设置字段长度
2022/06/10 MySQL
一篇文章带你掌握SQLite3基本用法
2022/06/14 数据库