CSS：点击 SVG 元素时悬停在 Safari 中不起作用

Question

在 iOS 设备上的 Safari 中点击此 SVG 元素时（iOS Chrome 很好，我目前无法检查桌面 Safari），它不会播放过渡动画以淡入替换

<g id="training-sub-menu">

。我知道动画是有效的，因为有一些奇怪的行为，如果我长按其中一个链接应该在的位置，它会打开一些 iOS 上下文菜单，然后在

<g>

中淡出（我放置了 2 秒的过渡来显示这一点）。所以我想我只是陷入了如何触发动画的困境，而所有其他浏览器似乎都响应

:hover

。

<?xml version="1.0" encoding="UTF-8"?>
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 306.12 409.2">
  <defs>
    <style type="text/css">
      @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600');

      .font-md {
        font-family: 'Poppins';
        font-size: 10px;
        font-weight: 500;
      }

      :root {
        --yellow: #f6b034;
      }

      .training {
        fill: var(--yellow);
      }

      .sub-menu {
        opacity: 0;
        visibility: hidden;
        height: 0;
      }

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

      .has-dropdown:hover + .sub-menu,
      .has-dropdown:hover + .sub-menu > g {
        opacity: 1;
        visibility: visible;
        height: auto;
        pointer-events: visiblePainted;
        transform: unset;
      }

      .has-dropdown:hover {
        opacity: 0;
        visibility: hidden;
        height: 0;
      }

      .sub-menu:hover {
        opacity: 1;
        visibility: visible;
        height: auto;
        pointer-events: none;
      }

      .sub-menu:hover > g {
        opacity: 1;
      }
    </style>
  </defs>
  
  <g id="training" class="has-dropdown">
    <path class="training" d="m0,256c0-27.61,22.39-50,50-50,27.61,0,50,22.38,50,49.99,0-.21.02-.42.02-.63v29.39c0,11.06,8.45,20.15,19.25,21.15.02,0,.04.09,0,.09-.04,0-62.38,0-69.27,0,0,0,0,0,0,0s0,0,0,0h-.62c.1,0,.21,0,.31,0C22.22,305.82,0,283.51,0,256Z"/>
    <text class="font-md" transform="translate(31 285)">Training</text>
  </g>
  <g id="training-sub-menu" class="sub-menu">
    <path class="training" d="m0,256c0-27.61,22.39-50,50-50,27.61,0,50,22.38,50,49.99,0-.21.02-.42.02-.63v29.39c0,11.06,8.45,20.15,19.25,21.15.02,0,.04.09,0,.09-.04,0-62.38,0-69.27,0,0,0,0,0,0,0s0,0,0,0h-.62c.1,0,.21,0,.31,0C22.22,305.82,0,283.51,0,256Z"/>
    <g id="text">
        <text class="font-md sub-menu-item" transform="translate(31 285)">
            <a href="https://google.com" target="_parent">Google</a>  
        </text>
        <text class="font-md sub-menu-item" transform="translate(31 265)">
            <a href="https://google.com" target="_parent">Google</a>  
        </text>
        <text class="font-md sub-menu-item" transform="translate(31 245)">
            <a href="https://google.com" target="_parent">Google</a>  
        </text>
    </g>
  </g>
</svg>

我尝试将

<text>

元素包装在

<g>

中，并按照以下答案在

<g>

上应用过渡：CSS 转换 SVG 文本元素在 Safari 中不起作用，但没有运气。

我也尝试过使用

-webkit-transition

。

最后，我尝试使用

onclick

作为页面上的 div，根据 CSS 加载此 SVG：悬停在 iOS Safari 和 Chrome 上不起作用，但这也不起作用。

是否可能是由于没有可点击的元素（根据本页的脚注：https://caniuse.com/mdn-css_selectors_hover）？

Answer 1

最终选择了 JavaScript 路线，这很遗憾，因为我认为让 CSS 解决方案工作会更优雅一些。我最终得到了父 HTML 中的一组基本 JavaScript 函数，并使用点击事件处理程序来操纵 SVG 来切换类：

<script>
    function showSubMenu(e) {
        e.currentTarget.classList.toggle('hidden');
        e.currentTarget.nextElementSibling.classList.toggle('visible');
    }

    function closeAllMenus(e) {
        if (!e.target.parentElement.classList.contains('has-dropdown')) {
            var subMenus = svgDoc.querySelectorAll('.sub-menu');
            subMenus.forEach(subMenu => {
                subMenu.classList.add('hidden');
                subMenu.classList.remove('visible');
            })

            var dropdowns = svgDoc.querySelectorAll('.has-dropdown');
            dropdowns.forEach(dropdown => {
                dropdown.classList.remove('hidden');
                dropdown.classList.add('visible');
            })
        }
    }

    document.addEventListener('click', closeAllMenus);

    var svgObj;
    if (screen.width > 767) {
        svgObj = document.getElementById("svg-object-desktop");
    }
    else {
        svgObj = document.getElementById("svg-object-mobile");
    }
    
    var svgDoc;
    svgObj.addEventListener('load', function() {
        svgDoc = svgObj.contentDocument;

        var dropdowns = svgDoc.querySelectorAll('.has-dropdown');
        dropdowns.forEach(dropdown => {
            dropdown.addEventListener('click', showSubMenu)
        });
    });
</script>

我对移动设备和非移动设备使用两种不同的 SVG，因此进行检查。

从好的方面来说，相应的 CSS 现在更简单了：

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

.hidden,
.sub-menu {
  opacity: 0;
  visibility: hidden;
  height: 0;
  transition: opacity 0.5s ease-in-out;
}

.visible,
.has-dropdown {
  opacity: 1;
  visibility: visible;
  height: auto;
  pointer-events: visiblePainted;
  transform: unset;
}

现在在 iOS Safari 中工作正常。