Возможный обходной путь для Chrome ошибки пути клипа с SVG - PullRequest
Новая
       9

Возможный обходной путь для Chrome ошибки пути клипа с SVG

0 голосов
/ 27 января 2020

Я создал минимальный пример, чтобы продемонстрировать ошибку Chrome, с которой я недавно столкнулся: 

const main = document.getElementById('main');

const topHover = document.getElementById('top-hover');
topHover.addEventListener('mouseenter', function(e) {
    main.setAttribute('clip-path', 'url(#top-clip)');
});
topHover.addEventListener('mouseleave', function(e) {
    main.setAttribute('clip-path', 'url(#everything)');
});

const bottomHover = document.getElementById('bottom-hover');
bottomHover.addEventListener('mouseenter', function(e) {
    main.setAttribute('clip-path', 'url(#bottom-clip)');
});
bottomHover.addEventListener('mouseleave', function(e) {
    main.setAttribute('clip-path', 'url(#everything)');
});

//main.setAttribute('clip-path', 'url(#everything)');
#main {
  fill: #51D2C3;
}

#bg {
  fill: #E1F5F2;
}

#top-hover {
  fill: none;
}

#bottom-hover {
  fill: none;
}
<svg height="200" width="300">
  <path id="bg" d='M100 50 h50 v50 h50 v50 h-50 v50 h-50 v-50 h-50 v-50 h50 z'></path>
  <path id="main" clip-path='url(#everything)' d='M100 50 h50 v50 h50 v50 h-50 v50 h-50 v-50 h-50 v-50 h50 z'></path>
	<g>
    <clipPath id="everything"></clipPath>
    <rect id="top-hover" pointer-events="all" x="50" y="50" width="150" height="75"></rect>
		<clipPath id="top-clip">
      <use href="#top-hover"></use>
		</clipPath>
    <rect id="bottom-hover" pointer-events="all" x="50" y="125" width="150" height="75"></rect>
		<clipPath id="bottom-clip">
      <use href="#bottom-hover"></use>
		</clipPath>
	</g>
</svg>

Ошибка, по-видимому, заключается в том, как Chrome обрабатывает путь к клипу, созданный одновременно с созданием элемента SVG. Кажется, что все, что применяется к элементу SVG в качестве исходного пути клипа, становится постоянным неявным путем клипа, который не может быть сброшен с помощью JavaScript. Я уже сообщал об этом здесь: https://bugs.chromium.org/p/chromium/issues/detail?id=1045915

  • в Chrome состояниях наведения не работают.
  • в Firefox они работают как положено.
  • если вы удалите свойство clip-path из объекта с id = "main" в части HTML / SVG и установите его программно через JavaScript (см. Закомментированную строку), зависание будет работать, как и ожидалось в Chrome а также.
  • , если вы вообще не устанавливаете начальный путь клипа, зависание работает, как и ожидалось, в Chrome (кроме запуска в состоянии «включено» для всех регионов)
  • если вы измените начальный путь клипа на что-то другое (обновите HTML / SVG-путь клипа для элемента id = "main" на url (# top-clip) или url (# bottom-clip)), только изначально не обрезанный region будет отображаться при применении нового пути клипа.

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

Это упрощенный пример моего действия UAL Logi c. В моей логике c я создаю вышеупомянутое определение с помощью d3.js, добавляя задержку к применению пути клипа (даже что-то вроде микросекунды), кажется, это решает проблему, но похоже на хак. Есть ли более чистый обходной путь или альтернативный способ определения аналогичной функциональности, которая устраняет эту ошибку?

...