HTML5に要素クリックイベントを追加する方法 svg_html5チュートリアルスキル

最近、canvas ではなく svg の click イベントを使って作っています。 svg の要素に click イベントを追加できるためです。
Canvas との比較。 SVG (詳細を参照)
次の表に、キャンバスと SVG のいくつかの違いを示します。

キャンバス
• 解像度依存
• イベント ハンドラーのサポートなし
• 弱いテキスト レンダリング機能
• .png または .jpg 形式でレンダリングする機能結果画像の保存
• 多くのオブジェクトが頻繁に再描画されるグラフィックスを多用するゲームに最適

SVG
• 解像度に依存しない
• サポートされているイベント ハンドラー
• 大きなレンダリング領域を持つアプリケーション (Google マップなど) に最適
• 複雑さが高いとレンダリングが遅くなります (DOM を過度に使用するアプリは高速ではありません)
• 適していません ゲーム アプリケーションによって作成された Web ページ

はモバイルデバイスをサポートする必要があるため、Chrome では正常に使用できますが、iPad でページを開くと、クリックイベントが機能しないことがわかりました。多くの情報を確認しましたが、問題の原因は見つかりませんでした。後で、w3c の svg を記述したデモで実際にクリック効果を実現できることがわかりました。使用した jquery はクリック イベントを追加しました。 svg 要素に onclick= がありませんでしたが、「circle_click(evt)」にも同様の記述があり、iPad の svg 要素にはクリック イベントが追加されました。 。