Eu tenho um mapa de imagem SVG incorporado em uma página HTML. Ele contém uma coleção de PNG<image>cada um envolvido em um link. Algumas dessas imagens se sobrepõem, no entanto, quando a parte sobreposta de uma imagem é transparente, eu gostaria que os eventos do ponteiro passassem para a imagem abaixo dela.

Inicialmente tentei usar<mask> e um filtro alfa, mas as máscaras não permitem que eventos de ponteiro passem da maneira que um<clipPath> seria. No entanto, clipPaths não podem ser definidos usando imagens.

Curiosamente, oA especificação SVG 1.1 menciona meu problema exato de passagem, aludindo ao fato de que pode ser solucionável, mas na verdade não diz como:

Se um autor deseja obter um efeito em que as partes transparentes de uma máscara permitem que eventos de ponteiro passem para um elemento abaixo, uma combinação de mascaramento e recorte pode ser usada.

Então, algum pensamento?

NB: Parece navegadoresnão suporta pointer-events: painted em imagens rasterizadas, então isso não é uma opção.

Exemplo: https://jsfiddle.net/a2bvrzd1/3/