• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > html5 svg 中元素点击事件添加方法

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

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含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的元素有了点击事件

您可能想查找下面的文章:

  • 实例讲解使用SVG制作loading加载动画的方法
  • 使用HTML5进行SVG矢量图形绘制的入门教程
  • HTML5新特性之用SVG绘制微信logo
  • 深入浅析HTML5中的SVG
  • 深入解析HTML5使用SVG图像时的viewBox属性用法
  • html5+svg学习指南之SVG基础知识
  • html5中svg canvas和图片之间相互转化思路代码
  • HTML中使用SVG与SVG预定义形状元素介绍
  • HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析
  • HTML5之SVG 2D入门12—SVG DOM及DOM操作介绍

相关文章

  • 2018-12-03WebSocket+MSE——HTML5 直播技术解析
  • 2018-12-03HTML5拖拽功能实现的拼图游戏
  • 2017-08-06让IE支持HTML5的方法
  • 2017-08-06涂鸦板简单实现 Html5编写属于自己的画画板
  • 2018-12-03H5+C3做出优酷视频截图效果
  • 2017-08-06一款利用html5和css3动画排列人物头像的实例演示
  • 2018-12-03html5之拖放的学习和完整实例代码
  • 2018-12-03HTML5<embed>标签的用法你知道多少?HTML5<embed> 标签属性详解
  • 2018-12-03HTML5 Google电吉他 可用键盘弹奏的图文代码介绍
  • 2018-12-03html5 兼容IE6结构的实现代码_html5教程技巧

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • Html5新特性用canvas标签画多条直线附效果截图_html5教程技巧
    • nw.js的localStorage的物理储存实例详解
    • 很酷的HTML5电子书翻页动画特效_html5教程技巧
    • datalist输入框与后台数据库数据的动态匹配
    • html5中在用户开始拖动元素或选择的文本时触发的事件ondragstart
    • HTML5+lufylegend实现游戏中的卷轴 _html5教程技巧
    • 详细介绍HTML5技术在风电、光伏等新能源领域的应用(图)
    • HTML5 File接口在web页面上使用文件下载
    • HTML5 Video/Audio播放本地文件示例介绍_html5教程技巧
    • HTML5 Canvas标签使用收录

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有