路径中的SVG图片-HTML [英] 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.

所以我有一个SVG图片，上面有很多方形路径.我在Inkscape中的一个正方形路径上放置了一个Square图像.然后，我将SVG文件嵌入到HTML中，我认为在其中添加了指向带有图片的路径的链接.我在添加链接或任何内容时没有任何问题，并且工作正常，但是现在好像图像正在取消链接.在链接正常工作之前，但当图像加载到正方形上方时，它的作用就好像是在覆盖链接.在将图像完全加载到浏览器之前，该链接有效并且可以访问.但是，一旦图片通过链接加载到该路径的顶部，它就会覆盖它，并且不再起作用.

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.

请帮助！！！

推荐答案

您可能已经找到了答案.在SVG中，所有元素都绘制在所有以前的元素之上(因此文件中元素的顺序很重要).

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 }

在SVG部分或包装的HTML CSS样式部分.

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

要使链接适用于SVG元素-因为您还可以向SVG元素添加链接属性，例如如果您要在矩形上叠加SVG IMAGE元素-不要忘记在SVG根元素声明中添加XLink命名空间.

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.

这篇关于路径中的SVG图片-HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！