How to enable clicking on layered svg images

问题:

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.

回答1:

You can make an element insensitive for mouse events by setting the pointer-events attribute to none (see Tinkerbin):

svg > *{opacity:.5}

回答2:

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.

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

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.

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.

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.

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.

** 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.