html5 svg 中元素點擊事件添加方法_HTML5教程
推薦:HTML5之SVG 2D入門5—顏色的表示及定義方式SVG和canvas中是一樣的,都是使用標準的HTML/CSS中的顏色表示方法,這些顏色都可以用于fill和stroke屬性,接下來介紹下顏色的表示及定義方式感興趣的朋友可以了解下,或許對你有所幫助
最近在用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中Canvas與SVG的畫圖原理比較canvas 與 SVG都能夠使你在瀏覽器中畫圖,但它們的基本原理不同,接下來將對canvas 與 SVG的畫圖原理進行介紹,感興趣的朋友可以了解下
相關HTML5教程:
- 只要五步 就可以用HTML5/CSS3快速制作便簽貼特效(圖)
- 網易微博Web App用HTML5開發的過程介紹
- HTML5 對各個標簽的定義與規定:body的介紹
- 關于HTML5的安全問題開發人員需要牢記的
- 關于HTML5的22個初級技巧(圖文教程)
- 開發人員所需要知道的HTML5性能分析面面觀
- HTML5 Web Database 數據庫的SQL語句的使用方法
- HTML5實踐-圖片設置成灰度圖
- HTML5安全介紹之內容安全策略(CSP)簡介
- HTML5 Web存儲方式的localStorage和sessionStorage進行數據本地存儲案例應用
- Bootstrap 學習分享
- input元素的url類型和email類型簡介
- 相關鏈接:
- 教程說明:
HTML5教程-html5 svg 中元素點擊事件添加方法。