如何在 iOS Safari 中为 SVG 元素实现可靠的悬停/点击菜单交互-html教程-PHP中文网

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

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

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

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

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

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

示例实现（适配

假设 SVG 通过

Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries

规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...

下载

<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 以或内联方式引入，需改用 document.querySelector 直接操作 DOM，无需 contentDocument；

为无障碍考虑，建议为 .has-dropdown 添加 role="button" 和 aria-expanded 属性，并在 JS 中同步更新。

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