CSS :悬停在SVG组区域而不是渲染的像素上，指针事件:边界框不能跨浏览器工作。如何解决方法

Question

我正在做一些带有CSS动画的动画SVG，可以在悬停时触发。我可以让SVG动画以我想要的方式在Chrome上悬停，但我面临着Firefox和Safari的问题。

显然，应用于组<g></g>的pointer-events属性在此浏览器上的行为与在其他现代浏览器上的行为不同，至少在尝试将值设置为bounding-box时是这样。

我正在做

g {
  pointer-events: bounding-box;
}

但是，只有当实际的<path>元素悬停时才会触发悬停，而不是像我需要的那样触发整个组<g>。

Can I use对此只字不提，只是提到svgs也支持这个属性。

下面是一个示例代码，让您看看我的SVG是什么样子的。在chrome悬停时，主包含组区域将触发悬停动画，在Firefox上，需要悬停实际路径(本例中的图标线)才能实现。

<?xml version="1.0" encoding="UTF-8"?>
<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
    <style>
        g {
            pointer-events: bounding-box;     
            //not working on FF
        }
        #mobile:hover .flip {
            transform-origin:55% 50%;
            -moz-transform-origin:55% 50%;
            animation: flip_left 1.6s forwards;
        }
        @keyframes flip_left {
          0% {transform: perspective(2000px) rotateY(90deg) skewY(-1deg)}
          30% {transform:perspective(2000px) rotateY(-25deg) skewY(-0.8deg)}
          50% {transform:perspective(2000px) rotateY(20deg) skewY(0.8deg)}
          70% {transform:perspective(2000px) rotateY(-10deg) skewY(-0.8deg)}
          100% {transform:perspective(2000px) rotateY(0deg)}
        }
    </style>
    <!-- Generator: Sketch 51.2 (57519) - http://www.bohemiancoding.com/sketch -->
    <title>Mobile solutions</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="mobile" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="MS_HP_Usecase_Based_Page-Desktop-2A" transform="translate(-766.000000, -418.000000)" stroke="#00A0DF" stroke-width="1.25">
            <g id="Asset-5" transform="translate(766.000000, 418.000000)">
                <g class="flip">
                <rect id="Rectangle-path" stroke-linecap="round" stroke-linejoin="round" x="12.35" y="7.41" width="15.32" height="25.33" rx="2.03"></rect>
                <circle id="Oval" stroke-linecap="round" stroke-linejoin="round" cx="20.01" cy="28.72" r="1.58"></circle>
                <path d="M18.43,10.72 L21.48,10.72" id="Shape" stroke-linecap="round" stroke-linejoin="round"></path>
            </g>
                <circle id="Oval" cx="19.67" cy="19.67" r="19.04"></circle>
            </g>
        </g>
    </g>
</svg>

我想找一个解决这个问题的办法，因为我想让这个动画跨浏览器工作。我希望它最终也能在IE11和Edge上工作。

谢谢,

Answer 1

所以pointer-events: bounding-box似乎不受大多数浏览器的支持。

我实现了@ccprog在我的问题的评论部分建议的解决方法。

我向svg添加了一个<rect fill="none">元素，它的尺寸与SVG本身相同。我为该元素添加了一个:hover选择器，并添加了同级选择器~，以选择包含flip类的同级组。

请参阅CSS：

#mobile-hover {
   visibility: visible;
   pointer-events: visible;
}
#mobile-hover:hover ~ .group .flip {
  -moz-transform-origin:55% 50%;
  -webkit-transform-origin: 55% 50%;
  transform-origin:55% 50%;
  -webkit-animation: flip_left 1.6s forwards;
  animation: flip_left 1.6s forwards;
}

我发现我必须将pointer-events: visible添加到rect元素中，这样它才能检测到:hover。我将visibility: visible作为一个要求添加到pointer-events: visible中，以使其正常工作。

下面是完整的新SVG代码：

<?xml version="1.0" encoding="UTF-8"?>
<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="mobile-icon">
    <style>
        #mobile-hover {
        visibility: visible;
        pointer-events: visible;
        }
        #mobile-hover:hover ~ .group .flip {
            -moz-transform-origin:55% 50%;
            -webkit-transform-origin: 55% 50%;
            transform-origin:55% 50%;
            -webkit-animation: flip_left 1.6s forwards;
            animation: flip_left 1.6s forwards;
        }
        @keyframes flip_left {
          0% {transform: perspective(2000px) rotateY(90deg) skewY(-1deg)}
          30% {transform:perspective(2000px) rotateY(-25deg) skewY(-0.8deg)}
          50% {transform:perspective(2000px) rotateY(20deg) skewY(0.8deg)}
          70% {transform:perspective(2000px) rotateY(-10deg) skewY(-0.8deg)}
          100% {transform:perspective(2000px) rotateY(0deg)}
        }
    </style>
    <!-- Generator: Sketch 51.2 (57519) - http://www.bohemiancoding.com/sketch -->
    <title>Mobile solutions</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="mobile" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" >
    <rect fill="none" width="40" height="40" id="mobile-hover">
    </rect>
        <g id="MS_HP_Usecase_Based_Page-Desktop-2A" transform="translate(-766.000000, -418.000000)" stroke="#00A0DF" stroke-width="1.25" class="group">
            <g id="Asset-5" transform="translate(766.000000, 418.000000)">
                <g class="flip">
                <rect id="Rectangle-path" stroke-linecap="round" stroke-linejoin="round" x="12.35" y="7.41" width="15.32" height="25.33" rx="2.03"></rect>
                <circle id="Oval" stroke-linecap="round" stroke-linejoin="round" cx="20.01" cy="28.72" r="1.58"></circle>
                <path d="M18.43,10.72 L21.48,10.72" id="Shape" stroke-linecap="round" stroke-linejoin="round"></path>
            </g>
                <circle id="Oval" cx="19.67" cy="19.67" r="19.04"></circle>
            </g>
        </g>

    </g>
</svg>

可以在Chrome，Safari和火狐上运行，我正在尝试测试IE11和Edge next。

非常感谢，