Элемент SVG с отсечкой предотвращает события в базовом элементе - PullRequest
Новая
       75

Элемент SVG с отсечкой предотвращает события в базовом элементе

0 голосов
/ 01 августа 2020

Изменить: Возможно, мне нужно проверить свое предположение ... Есть ли способ визуализировать svg, чтобы элемент, лежащий в основе другого элемента, мог получать события?

![enter image description here

The red circle does not respond to its hover event where it is under the clipped circle.

The rectangle iindicates the masked and clipped area of the green circle. I want the visible red and green areas to both receive pointer events. How would I get the whole red circle to respond - It has to underly the green circle.

Скрипка 

<svg id="svg_wrp" width="600" height="600" style='z-index:2'>
  <defs>
    <mask id="green_mask">
      <circle cx="300" cy="300" r="200" fill="#fff"></circle>
      <rect x="100" y="50" width="400" height="200" fill="#000"></rect>
    </mask>
    <clipPath id="green_clip">
      <rect x="100" y="50" width="400" height="200" fill='#000'></rect>
    </clipPath>
  </defs>
  <!-- Following for reference only -->
        <rect x="100" y="50" width="400" height="200" stroke="#080" fill="none"></rect> 
        <circle cx="300" cy="300" r="200" fill="rgba(0 0 255 /.2)" stroke="#080"></circle>
   <!-- Above for reference only -->
  <g>
    <circle cx="300" cy="50" r="100" fill="rgba(255 0 0 /1)" class="hover_it" ></circle>
    <!-- Following circle will have top part hidden, but mask does not prevent events  -->
    <circle id="green_hide_area"        
    cx="300" cy="300" r="200" fill="rgba(0 255 0 /1)" class="hover_it" mask="url(#green_mask)" ></circle>
  </g>
  <g>   
    <!-- Following circle will prevent events -->
    <circle id="green_event_stop"       
    cx="300" cy="300" r="200" fill="transparent" clip-path="url(#green_clip)" ></circle>
  </g>
</svg>


.hover_it{opacity:.5}
.hover_it:hover{opacity:1}
...