Question

我不想添加到svg的链接（这是不可能的，因为我没有提供svg），但是想要添加像<a href=""><img src="foo.svg"/></a>这样的链接。只有这次它不是img，而是object（所以我可以包含svg）。

它适用于某些浏览器，但例如不适用于Firefox。如何做这样的事情的默认想法是什么？

Answer 1

在Firefox <object>中捕获所有点击，并且不会让它们“冒泡”出SVG文档。一个明智的解决方法是使用另一个首先获得点击的元素来覆盖SVG。

幸运的是，这可以通过纯CSS完成：

a {position:relative; display:inline-block;}
a:after {content:""; position:absolute; top:0; left:0; bottom:0; right:0;}

您可能希望将:-moz-any-link伪类添加到选择器以使其成为仅Gecko。

Answer 2

将链接放在svg文件中，例如：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <a xlink:href="">
  ...
 </a>
</svg>

Answer 3

使用svgweb，您可以嵌入任意SVG跨浏览器，并通过常规DOM方法进行修改。这包括将事件侦听器附加到SVG的任何部分。

即使你不能用这种方式把它放在传统的锚标签中（我还没试过，它可能有用），你至少能够处理点击事件并根据它们进行导航，这真的很棒你在追求什么。