Many svg's near with each other as clickable icons

Question

I have many icons svg, I could use them as fonts if that is helpful and I would like to use ng-click(basically any kinda of click you know) the way that when i click on svg1 and svg2 wont be clicked. Till now i have tried allot of icons and many ways of doing it without success. I have upload to codepen small example, each region of that country have it's own svg which cover other svg's and make click on them impossible. Basic use of svg is below:

<svg>
    <use xlink:href="#icon-region"></use>
</svg>

The `` tag is replaced by the actual icon SVG. If you inspect the element using Chrome Dev Tools you'll see those tags aren't there anymore. If you have or can add jQuery to your application, maybe you can use the `on` function this way: `jQuery(document).on('click', '.regionPosition > *', function () { ... });`, instead of `ng-click` directive. — Gustavo Straube, Aug 18 '15 at 17:06
Click is not a problem, click on specific svg, that is pain in the *** :) — Honchar Denys, Aug 19 '15 at 12:10
After your comment I made some new tests and now I get what is going on. The issue is the way things are rendered, within "layers". Since all ` — Gustavo Straube, Aug 19 '15 at 12:35

score 1 · Accepted Answer · edited May 23 '17 at 11:44

Since all <svg> elements in your page are absolute positioned and have both width and height of 100%, it's possible to only catch elements from the last element. That behavior comes from the way elements are rendered, within layers, like the example bellow:

+-<svg>--+
|+-<svg>--+
||+-<svg>--+
|||        |
+||        |
 +|        |
  +--------+

If all those elements have the same width, height and position you can only catch events from the last one, on the top of all.

To avoid this behavior you can do the following, with CSS:

.regionPosition {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.regionPosition > * {
  pointer-events: all;
}

This way you disable the event listening from <svg> elements – with regionPosition class – and catch only the events from their immediate children.

Since you're using <use> inside your SVG to get the actually graphics, you can't rely only on Angular to bind the event, because the elements are not yet there when you load the script. You'll need to attach the event listener to the document and then check the target before call the function you want. This can be easily done with jQuery, as follows:

jQuery(document).on('click', '.regionPosition > *', function () {
  // Call your function.
});

I changed your code a bit to show how to do it, here: http://codepen.io/anon/pen/waLwrm. I'm using a simple window.console.log() call to just log the clicked element. You can change it to another logic in your final code.

Reference: jQuery hover problem due to z-index

in your code you can click only on one svg, task is to click on any svg that should call function of that svg. http://codepen.io/Crackeraki/pen/RPzPVK in the blue region, click is impossible. — Honchar Denys, Aug 19 '15 at 18:02
@GoncharDenys, take a look at this: https://drive.google.com/file/d/0B_hs-riEpLHDM0RxX3ZXS1Zyem8/view?usp=drivesdk I've just recorded my screen using your last link. As shown, it's possible to click and capture the event for each SVG. — Gustavo Straube, Aug 19 '15 at 18:17
in your video you just show location of svg in inspect element, click on it, it should show other message. — Honchar Denys, Aug 19 '15 at 19:09
@GoncharDenys, the part of code that do the trick is this one: `jQuery(document).on('click', '.regionPosition > *', function () {window.console.log(this); });`. As I commented in your question, you'll need jQuery to get it working. I'm updating my answer to clarify that. — Gustavo Straube, Aug 19 '15 at 19:45
Ok i see your point, and it's working. I really don't want to use JQuery, but i guess your answer could count as answer. — Honchar Denys, Aug 19 '15 at 20:57

Many svg's near with each other as clickable icons

1 Answers1