События указателя или указатель мыши над маской изображения в React - PullRequest
Новая
       49

События указателя или указатель мыши над маской изображения в React

0 голосов
/ 01 октября 2019

У меня есть контейнер с маской изображения и дочерние элементы с событиями onMouseOver и стилями наведения.

Любые события указателя не работают через маску и работают вне маски, где содержимое не отображается. С другой стороны, я хочу получить события указателя в видимом разделе и игнорировать их в невидимой немаскированной части.

Я попытался установить указатель-события: нет в контейнере и указатель-события:авто на ребенка, но это не работает.

Вот мой файл стилуса 

.container {    
  width 100%
  position absolute
  height 100%    
  pointer-events none    
  mask-image: url('../../images/mask.svg')
  mask-size 600px auto    
  mask-repeat: no-repeat
  .turns {
    position absolute
    pointer-events auto
    &:hover{
       ...
    }
  } 
}

Есть ли способ обойти это? Я не против, если мне придется использовать javascript или применить маску по-другому.

Спасибо

Редактировать:

Теперь после этого урока https://codepen.io/machal/pen/jrPpdO,Я пытаюсь это: 

<svg width="500" height="500" viewBox="0 0 500 500">
      <clipPath id="clip-path">
        <path d="M22.154,108.389 L258.274,13.5 L449.156,151.421 L487.774,429.469 L211.933,472.5 L30.981,366.577 L22.154,108.389 z"/>
      </clipPath>
      <div
        style={{
            width: `600px`,
            height: `600px`,
            background: `blue`,          
          }}
        clip-path="url(#clip-path)"
      />
</svg>

Но div даже не виден.

...