SVG：如何忽略图像透明部分上的指针事件

我在HTML页面上嵌入了一个SVG图像映射。 它包含一个PNG

的集合，每个集合包装在一个链接中。 有些图像重叠，但是如果图像的重叠部分是透明的，我希望指针事件传递到它下面的图像

最初我尝试使用

和alpha过滤器，但掩码不允许指针事件以

的方式通过。但是，clippath不能使用图像定义

有趣的是，我顺便提出了一个确切的问题，暗指这个问题可能是可以解决的，但实际上并没有说明如何解决：

如果作者希望实现遮罩的透明部分允许指针事件传递到下面的元素的效果，可以使用遮罩和剪辑的组合

有什么想法吗

注意：看起来浏览器

指针事件：在光栅图像上绘制
，所以这不是一个选项

示例：
如果我正确理解了您的意思，那么单击事件应该通过上方半透明图像传递到下方半透明图像，并在其上触发

出于这些目的，属性
pointer events=“none”

SVG规范明确规定，如果
pointer events=“visiblePainted”
（默认值）或
pointer events=“painted
，则光栅图像中的完全透明像素不应导致单击事件

然而不幸的是，Chrome、Firefox和Edge似乎都将位图图像视为完全不透明的

如果您想鼓励修复此问题，可以启动以下错误通知单：



好了，现在唯一的解决办法就是使用剪辑路径


功能点击（evt）{
log（“单击”+evt.target.parentElement.id）；
}
document.getElementById（“蓝色”）.addEventListener（“单击”，单击）；
document.getElementById（“红色”）.addEventListener（“单击”，单击）；

我从未测试过浏览器的实现，但规范是否进一步说明，光栅图像的默认
指针事件：visiblePainted
仅在指针下的光栅图像的任何像素不是完全透明的情况下才会接收事件“？哦，我没有看到这一部分——尽管它似乎不起作用（至少在firefox和chrome中是这样），请创建一个。关于您的用例，我可以问很多问题，这些问题可以通过一个示例来回答。@PaulLeBeau谢谢，我在问题中添加了我的示例。问题是图像既有100%不透明部分，也有100%透明部分，我需要前者捕获指针事件，后者忽略它们。@NeonPaul将代码添加到您的问题中，以便人们尝试专门解决问题。不清楚你为什么不这么做是的，谢谢，我已经在问题中添加了我的例子。