SVG点击事件实现技巧详解

本文深入解析了HTML中SVG点击交互在iOS Safari（尤其是iPad）上失效的根本原因与实战解决方案，指出问题核心在于SVG渲染层默认禁用pointer事件，必须显式设置`pointer-events: all`并同时绑定`click`和`touchstart`双事件才能可靠触发；文章系统梳理了原生JS、内联`onclick`和jQuery三种兼容性递减的实现方式，强调尺寸缺失、动态插入时机、CSS继承陷阱等易被忽视的关键细节，为开发者提供了一套开箱即用、经实测验证的跨端SVG交互最佳实践。

SVG 元素点击事件在桌面端通常能直接用 addEventListener 绑定，但在 iOS Safari（尤其是 iPad）上大概率失效——根本原因不是代码写错，而是 SVG 渲染层默认不响应 pointer 事件。

为什么 addEventListener('click', ...) 在 iPad 上不触发

iOS Safari 对嵌入式 SVG 的事件捕获有特殊限制：当 SVG 通过 标签内联写入 HTML 时，部分版本（特别是 iOS 15–16）会忽略对子元素（如 、）的原生 click 监听，除非显式启用交互能力。

• pointer-events: all 必须加在目标 SVG 元素上（不能只加在父 或 CSS 类里）
• 如果用 或