路径中的 SVG 图像 - HTML

Question

我遇到了一个棘手的问题，我似乎无法弄清楚。它有很多不同的文件，所以让我们开始吧，不要添加任何代码或文件文档。

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

这很常见吗？我是笨蛋吗？好像我只是在这里遗漏了一些东西。基本上需要以某种方式添加图像而不覆盖下面的链接路径。

请帮忙！！！

Answer 1

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

如果一个元素完全覆盖了他下方的另一个元素，那么它将基本上阻止其交互事件。解决方案是通知 CSS 引擎使用

删除此元素（或具有相同样式的元素）的任何指针事件

.nopointer { pointer-events: none }

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

对于适用于 SVG 元素的链接 - 因为您也可以向 SVG 元素添加链接属性，例如如果您将 SVG IMAGE 元素覆盖在矩形上 - 不要忘记在 SVG 根元素声明中添加 XLink 命名空间。