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

最近在用svg的点击事件做东西,之所以用svg而不用canvas就是因为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的元素有了点击事件
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

这篇文章主要介绍了使用HTML5进行SVG矢量图形绘制的入门教程,包括基本图形的绘制和简单的渐变效果等介绍,注意旧版本IE对其的支持并不好,需要的朋友可以参考下
SVG是Scalable Vector Graphics的缩写,意为可缩放矢量图形。1998年,万维网联盟成立了一个工作组,研发一种通过XML来表现矢量图形的技术——SVG!由于SVG也是一种XML文件,所以SVG也继承了XML的开放性、可移植性和交互性的优点,本文介绍html5中svg,需要的
这篇文章主要介绍了深入解析HTML5使用SVG图像时的viewBox属性用法,包括一些响应式设计相关的内容,需要的朋友可以参考下
本文主要介绍了SVG的基础概念等知识,以及SVG与CANVAS的区别,最后给出了一个简单示例,方便大家更好的了解SVG可缩放矢量图形。推荐给大家。
写到一个多层点击事件的监听。觉得还是挺好玩的。于是把它从模块中抽化出来了,喜欢的朋友可以参考下
需要把网页部分内容做正文,并把原网页转成pdf作为附件,发送邮件给boss,将svg转成canvas显示,但是后来发现canvas也无法正常显示,最后不得已,只能将canvas标签再一次转成图片格式