我的应用程序使用最多 6 个分层的 svg 图像来创建交互式图像。我发现我无法在第一个下方的任何图像上单击鼠标。
** 编辑。删除了多余的代码和文本。
问问题
857 次
2 回答
0
pointer-events您可以通过将属性设置为none（请参阅 Tinkerbin ）来使元素对鼠标事件不敏感：
SVG > *{不透明度：.5}
于 2012-12-12T00:29:43.717 回答
0
从本质上讲，我不能以这种方式做我想做的事。堆叠嵌入的图像会导致只有顶层可以被鼠标点击。
图像地图有效，但有些混乱。
我创建了一个清晰的图像，将其命名为 clearOverlay，并给出了一个将它与我的图像映射相关联的 usemap 值。
我使用免费的在线应用程序http://www.image-maps.com创建的图像地图让我可以创建可点击区域并为我生成 html。在清理它并交换 onclick 函数的 href 值后，我将地图添加到我的代码中。
下一个问题是让它覆盖我现有的图像。我最终使用 style="position:relative; top:-300px" 强制它直接坐在我的图像上。我确信一定有更好的方法，但在这一点上对我有用。
对于其他这样做的人，不要忘记将 clearOverlay 放在图像列表的最后，或者将 css z-index 设置为高于其他所有内容以确保它位于顶部。
所以我现在有一个堆叠的 svg 图像，我可以根据用户点击的位置来操作每个 svg。我只用了5天！我对自己的这种编码有点百灵鸟。
** 我上面的图像地图不会缩放到不同尺寸的屏幕。下次我尝试这个时，我将尝试使用带有填充区域的透明 svg 我希望单击的位置。
于 2012-12-12T21:34:54.953 回答