SVG 精灵与 <use> 和 xlink：href

Question

我正在使用SVG精灵，它似乎工作得很好，所以我想直到我在ie9(我们支持的最低浏览器(中打开网站。所有 SVG 都没有显示。以下是我引用我的 SVG 的方式：

<svg class="icon-search">
<use xlink:href="#icon-search"></use>
</svg>

因此，这适用于所有现代浏览器，但经过一些研究，现在已弃用，您应该只使用 href 而不使用 xlink：。所以我将所有 SVG 更改为如下所示：

<svg class="icon-search">
<use href="#icon-search"></use>
</svg>

现在我的问题是我的SVG在Safari和ios中不起作用！！ 我正在寻找一种适用于所有现代浏览器并适用于IE9的解决方案。有没有人遇到过这个问题并找到了很好的解决方案？

Answer 1

你可以使用polyfill svg4everyone

。

Answer 2

提供这两个属性。现代浏览器更喜欢href而不是xlink：href。

我不认为现代浏览器会放弃对xlink：href的支持，直到Safari实现它。出于这个原因，我反对从Firefox中删除xlink：href支持。