Javascript 如何启用单击分层svg图像

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

---

**编辑。多余的代码和文本被删除。

您可以通过将

指针事件属性设置为
none
（），使元素对鼠标事件不敏感：


svg>*{opacity:.5}
本质上，我不能用这种方式做我想做的事。堆叠嵌入的图像只会导致鼠标单击顶层

一张图像地图是有效的，有一些乱七八糟的地方

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

我的imagemap是我用一个免费的在线应用程序创建的，该应用程序获取了我的图片，允许我创建我的可点击区域，并为我生成html。在清理并交换onclick函数的href值后，我将映射添加到代码中

下一个问题是让它覆盖我现有的图像。我最终使用style=“position:relative；top:-300px”迫使它正好位于我的图像上。我相信一定有更好的方法，但在这一点上，这对我来说是有效的

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

现在我有了一个堆叠的svg图像，可以根据用户单击的位置来操作每个svg。只花了我5天时间！我有点喜欢你自己编代码，百灵鸟

**我上面的图像地图不会缩放到不同大小的屏幕。下次尝试时，我将尝试使用一个透明的svg，其中包含我希望单击的填充区域
 这听起来不错，我只是在实现它时遇到了一些困难。我已经编辑了上面的文章，为我的一个svg添加了标题信息。这些svg嵌入在div标记中。感谢任何微调帮助。指针属性应该做什么？你是说指针事件吗？@罗伯特：是的。这显然没有帮助。但是更正后，仍然不允许点击下一个图像。您的svg中有无效的CSS，请改为尝试：
svg>*{opacity:.5；指针事件：none；}
@Erik Ta，现在也已对此进行了更正。但是它仍然不允许点击进入下一张图片。你能提供一个更完整的例子吗？您应该意识到，如果您将元素堆叠在彼此的顶部，那么您似乎试图做的事情将不会起作用。