Как игнорировать верхний перекрывающий объект по hover в SVG?

#css #css3 #svg

В SVG есть два объекта один из которых (верхний) частично перекрывает другой объект
(нижний). На нижний объект повешен hover. 

Как сделать так что бы ховер срабатывал не только на открытый участок нижнего объекта
но и на ту часть которая закрывает верхний?
    

Ответы

Ответ 1

Классический HTML-способ — использование pointer-events:none; актуален и для svg:



.red {
  fill: red;
  cursor: pointer;
}

.blue {
  fill: blue;
  pointer-events: none;
}

.red:hover {
  fill: orange
}