如何启用点击分层的SVG图像 [英] How to enable clicking on layered svg images

问题描述

我的应用最多使用6张SVG图像进行分层以创建交互式图像.我发现我无法用鼠标点击第一个下方的任何图像.

My app uses up to 6 svg images layered to create an interactive image. I have found that I cannot mouseclick on any images below the first.

**编辑.多余的代码和文本已删除.

** Edit. Excess code and text removed.

推荐答案

从本质上讲，我无法以这种方式进行操作.堆叠嵌入的图像只会导致鼠标单击顶层.

In essence I cannot do what I want this way. Stacking embedded images results in only the top layer being clickable by the mouse.

一张图像地图起作用了，有些令人困惑.

An image map works, with some mucking about.

我创建了一个清晰的图像，命名为clearOverlay，并给出了一个usemap值，将其与我的图像图相关联.

I created a clear image calling it clearOverlay and gave is a usemap value tying it to my image map.

我使用免费的在线应用程序创建的我的图像地图 http://www.image-maps.com 拍摄了我的图片后，我得以创建自己的可点击区域并为我生成了html.清理并交换onclick函数的href值后，我将地图添加到了代码中.

My imagemap I created using a free online app http://www.image-maps.com which took my image allowed me to create my clickable zones and generated the html for me. After cleaning it up and swapping the href values for onclick functions I added the map to my code.

下一个问题是使它覆盖我现有的图像.最终，我使用了style ="position:relative; top:-300px"强制其正好位于我的图片上.我相信肯定有更好的方法，但是在这一点上对我有用.

Next problem was getting it to overlay my existing images. I eventually used style="position:relative; top:-300px" forcing it to sit squarely on my image. I'm sure there must be a better way, but at this point that worked for me.

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

For anyone else doing this don't forget to either place the clearOverlay last in your image list or set the css z-index to higher than everything else to make sure it is sitting on top.

因此，我现在有一个堆叠的svg图像，可以在其中根据用户单击的位置来操作每个svg.它只花了我5天时间！我对自己的这种编码有点过时了.

So I now have a stacked svg image, where I can manipulate each svg according to where the user clicks. Its only taken me 5 days! I'm kinda over this coding by yourself lark.

**我上面的图像映射无法缩放到不同尺寸的屏幕.下次尝试此操作时，我将尝试使用一个透明的svg，该透明的svg带有要单击的填充区域.

** My image map above will not scale to different sized screens. The next time I try this, I will experiment using a transparent svg with fill zones where I wish to click.

这篇关于如何启用点击分层的SVG图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！