如何在 iOS Safari 中为 SVG 元素实现可靠的悬停或点击菜单交互

ios safari 不支持 svg 内部元素的 :hover 伪类触发（尤其在触摸设备上），导致基于 css 的下拉菜单失效；本文提供兼容性完备的 javascript + css 方案，通过事件委托与 class 切换实现平滑、可访问的 svg 下拉交互。

ios safari 不支持 svg 内部元素的 :hover 伪类触发（尤其在触摸设备上），导致基于 css 的下拉菜单失效；本文提供兼容性完备的 javascript + css 方案，通过事件委托与 class 切换实现平滑、可访问的 svg 下拉交互。

在移动端（尤其是 iOS Safari）中，<svg> 内部元素无法可靠响应 :hover，根本原因在于：Safari 对 SVG 内嵌内容的 :hover 支持受限，且触摸事件不会自动触发 hover 状态（不同于桌面浏览器的模拟）。即使添加 -webkit-transition 或包裹 <g>，也无法绕过该限制——这与 HTML 元素不同，SVG 的事件模型和样式作用域更严格。

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

放弃纯 CSS 的 :hover 逻辑，改用轻量级 JavaScript 监听点击事件，并通过 class 控制显隐状态。该方案具备以下优势：

• 完全兼容 iOS Safari、Chrome for iOS 及所有现代桌面浏览器；
• 语义清晰、易于调试与维护；
• 支持点击外部区域自动收起（提升用户体验）；
• 与 SVG 动态加载（如 <object> 嵌入）无缝协作。

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

假设 SVG 通过 <object id="svg-object-mobile"> 引入，需等待其 load 事件后再绑定事件：

<object id="svg-object-mobile" data="menu.svg" type="image/svg+xml"></object>

<script>  function showSubMenu(e) {    const target = e.currentTarget;    const submenu = target.nextElementSibling;    // 切换主项与子菜单可见性    target.classList.toggle('hidden');    submenu.classList.toggle('visible');  }  function closeAllMenus(e) {    // 点击非下拉触发区时关闭所有菜单    if (!e.target.closest('.has-dropdown')) {      const subMenus = svgDoc.querySelectorAll('.sub-menu');      subMenus.forEach(el => {        el.classList.add('hidden');        el.classList.remove('visible');      });      const dropdowns = svgDoc.querySelectorAll('.has-dropdown');      dropdowns.forEach(el => {        el.classList.remove('hidden');        el.classList.add('visible');      });    }  }  document.addEventListener('click', closeAllMenus);  // 根据屏幕宽度选择对应 SVG 实例  const svgObj = window.matchMedia('(max-width: 767px)').matches    ? document.getElementById('svg-object-mobile')    : document.getElementById('svg-object-desktop');  let svgDoc;  svgObj?.addEventListener('load', function () {    svgDoc = svgObj.contentDocument;    const dropdowns = svgDoc.querySelectorAll('.has-dropdown');    dropdowns.forEach(dropdown => {      dropdown.addEventListener('click', showSubMenu);    });  });</script>

对应 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：防止隐藏元素仍拦截点击；
• 若 SVG 以 <img> 或内联方式引入，需改用 document.querySelector 直接操作 DOM，无需 contentDocument；
• 为无障碍考虑，建议为 .has-dropdown 添加 role="button" 和 aria-expanded 属性，并在 JS 中同步更新。

此方案不仅解决了 Safari 的兼容性痛点，还提升了交互鲁棒性与可维护性——在复杂 SVG 导航场景中，是比 hack 式 CSS 更可持续的选择。