html5 svg 中元素點擊事件添加方法

2024-08-26 00:16:09

字體：大中小

來源：轉載

供稿：網友

點評：最近在用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中Canvas與SVG的畫圖原理比較

下一篇：Html5游戲開發之乒乓Ping Pong游戲示例(一)