路径中的 SVG 图像 - HTML

Question

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 image with a lot of square paths all over it. I placed an Square image over one of the square paths in Inkscape. Then I embedded the SVG file into HTML, where I think added a link to that path w/ image. I was having no issues adding the links or anything and it was working just fine, but now it seems as if the image is canceling out the link. Before the link worked just fine but when the image loads over the square it acts as if it's covering the link. Before the image is fully loaded into the browser the link works and is accessible. But once the image loads on top of that path with the link it covers it and doesn't work anymore.

Is this common and am I dumb? Seems like I'm just missing something here. Need to basically add the image somehow without it covering the linked path underneath.

Please help!!!

Answer 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, eg 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.