CSS: наведите курсор на область группы SVG вместо визуализированных пикселей, события-указатели: ограничивающая рамка не работает в браузере. Как обойти - PullRequest
Новая
       33

CSS: наведите курсор на область группы SVG вместо визуализированных пикселей, события-указатели: ограничивающая рамка не работает в браузере. Как обойти

0 голосов
/ 02 сентября 2018

Я работаю над некоторыми анимированными SVG с CSS-анимациями, которые запускаются при наведении курсора. У меня есть возможность анимировать SVG при наведении, как я хочу для Chrome, но я сталкиваюсь с проблемой Firefox и Safari.

Очевидно, что свойство pointer-events, примененное к группам <g></g>, не дает такого же поведения в этом браузере, как в других современных, по крайней мере при попытке установить значение bounding-box.

Я делаю 

g {
  pointer-events: bounding-box;
}

но зависание срабатывает только тогда, когда наведен фактический элемент <path>, а не вся группа <g>, как мне бы хотелось.

Могу ли я использовать ничего об этом не говорит, упоминается, что 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.

Спасибо

1 Ответ

0 голосов
/ 03 сентября 2018

Так что pointer-events: bounding-box, похоже, не поддерживается большинством браузеров.

Я применил обходной путь @ccprog, предложенный в разделе комментариев моего вопроса.

Я добавил элемент <rect fill="none"> в svg, который имеет те же размеры, что и сам 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 и Firefox, и я пытаюсь проверить IE11 и Edge в следующем.

Большое спасибо,

...