如何启用单击分层svg图像

Question

我的应用最多使用6个svg图像分层来创建交互式图像。我发现我不能鼠标点击第一个下方的任何图像。

**编辑。删除了过多的代码和文本。

Answer 1

您可以通过将pointer-events属性设置为none（see Tinkerbin）来使鼠标事件对元素不敏感：

               svg＆gt; * {不透明度：.5}                                 

Answer 2

从本质上讲，我无法以这种方式做我想做的事。堆叠嵌入的图像只会导致顶层被鼠标点击。

图像地图有效，有些蠢蠢欲动。

我创建了一个清晰的图像，称之为clearOverlay，并给出了一个usemap值，将其绑定到我的图像映射。

我使用免费在线应用http://www.image-maps.com创建的我的图片地图我的图像允许我创建可点击区域并为我生成HTML。清理完它并交换onclick函数的href值后，我将地图添加到我的代码中。

下一个问题是让它覆盖我现有的图像。我最终使用了style =“position：relative; top：-300px”，迫使它正好坐在我的图像上。我敢肯定必须有更好的方法，但此时这对我有用。

对于其他任何人这样做，不要忘记将clearOverlay放在图像列表的最后，或者将css z-index设置为高于其他所有值，以确保它位于顶部。

所以我现在有一个堆叠的svg图像，我可以根据用户点击的位置操作每个svg。它只花了我5天！我很喜欢这种编码方式。

**我上面的图片地图不会缩放到不同大小的屏幕。下次我尝试这个时，我会尝试使用带有填充区域的透明svg，我想点击它。