Svg Image In Path - Html

I’ve got a tricky issue going on that I can’t seem to figure out. It’s a lot of different files so let’s start without any code or file docs added. So I’ve got a SVG imag

Solution 1:

You have probably already found the answer. In SVG all elements are drawn on top of all previous (so the order of the elements in the file matters).

If one element completely covers the other below him then it will essentially block its interactive events. The solution is to notify CSS engine to drop through any pointer events for this element (or elements with same style) using

.nopointer { pointer-events: none }

in the section of the SVG or in the wrapped HTML CSS style section.

For the links to work for SVG elements - since you can add a link attribute to SVG elements as well, e.g. if you would have SVG IMAGE elements overlaid on your rectangles - don't forget to add the XLink namespace in the SVG root element declaration.