如何在iOS Safari中实现SVG元素悬停点击菜单交互

在移动端，尤其是苹果设备上的 iOS Safari 中，开发带有下拉菜单的 SVG 导航时，开发者常常会遇到兼容性难题。桌面浏览器上常见的 :hover 伪类在触摸屏上完全失效，导致菜单无法正常展开。根本原因在于两点：Safari 对 SVG 内嵌内容的 :hover 支持非常有限，同时触摸事件本身不会触发悬停状态。

触摸行为在 iOS Safari 中不会被模拟成悬停，因此即使为 元素添加 -webkit-transition 或进行多层嵌套，也无法突破这一限制。SVG 的事件模型和样式作用域比 HTML 元素更为严格，不能沿用传统思路。

推荐方案：JavaScript 驱动的 class 切换

与其在纯 CSS 中寻找变通，不如采用经过实战检验的可靠方法：使用轻量级的 JavaScript 接管交互逻辑。核心思路是监听点击事件，通过切换元素的 class 来控制子菜单的显示与隐藏。该方案的优点包括：

• 完美兼容 iOS Safari、Chrome for iOS 以及所有现代桌面浏览器，一次实现长期有效。
• 代码语义清晰，便于后期维护，每个 class 的作用一目了然。
• 支持点击菜单外部区域自动收起，该细节对提升用户体验至关重要。
• 能与动态加载的 SVG（如通过 嵌入的）顺畅配合。

示例实现（适配 加载的 SVG）

如果 SVG 是通过 引入的，需等待其加载完成后再绑定事件。以下为对应的 JavaScript 和 CSS 代码，可直接使用：

对应 CSS（精简、高效、可动画）

.sub-menu > g {
  transition: opacity 0.5s ease-in-out;
}

/* 隐藏状态 */
.hidden,
.sub-menu {
  opacity: 0;
  visibility: hidden;
  height: 0;
  pointer-events: none;
  transition: opacity 0.5s ease-in-out, visibility 0.5s, height 0.5s;
}

/* 显示状态 */
.visible,
.has-dropdown {
  opacity: 1;
  visibility: visible;
  height: auto;
  pointer-events: auto;
}

注意事项：

• 避免直接操作 style.opacity：通过 class 切换驱动 CSS 动画，过渡效果更平滑，也便于复用，是更规范的做法。
• pointer-events: none 必须与 visibility: hidden 配合使用：单独使用 pointer-events: none 虽能防止点击穿透，但元素仍占据空间，可能干扰后续交互。两者结合可将隐藏元素的影响降到最低。
• 如果 SVG 通过 标签或内联在页面中，应改用 document.querySelector 操作，无需使用 contentDocument。
• 从无障碍角度考虑，建议为承载下拉菜单的元素（如 .has-dropdown）添加 role="button" 和 aria-expanded 属性，并在 JavaScript 中同步更新其状态。

相比各种奇技淫巧的 CSS Hack，基于 JavaScript + CSS class 的方案不仅可以彻底解决 Safari 的兼容性问题，还能让交互逻辑更加健壮、易于维护。在构建复杂的 SVG 导航时，这一方案是更可靠的生产力工具。