0

我有个小问题，我习惯用这种方式使用 SVG 图标：

span{
  width:30px;
  height:30px;
}
span svg{
  width: inherit;
  height: inherit;
  display:block;
  fill: red;
}
<svg style="display: none;">
    <symbol id="arrow" viewBox="0 0 250 250">
        <path d="M70.9 245.5c-1.7 1.7-3.8 2.5-6.2 2.5s-4.5-.8-6.2-2.5c-3.4-3.4-3.4-8.9 0-12.3L166.8 125 58.6 16.8c-3.4-3.4-3.4-8.9 0-12.3 3.4-3.4 8.9-3.4 12.3 0l114.4 114.4c3.4 3.4 3.4 8.9 0 12.3L70.9 245.5z"/>
    </symbol>
</svg>

<span>
    <svg class="icon" viewBox="0 0 250 250">
        <use xlink:href="#arrow"></use>
    </svg>
</span>

最近xlink:href属性已被 SVG2 弃用，所以我决定xlink:href从项目中删除所有内容，离开href MDN Doc

正如您在 MDN Docs 上看到的，建议使用href代替，xlink:href它在 Chrome 和 Edge 上运行良好，但在 Firefox 上不行。

这是项目Link的链接，如果您使用 Chrome 或 Edge 打开网站，您会在顶部导航中看到一个小图标，但在 Firefox 上没有。

¿ 有人可以给我一个解决方案吗？

PD：对不起我的英语。

4

1 回答 1

0

href 支持将在Firefox 51中提供。

Firefox 51 将于 2017 年 1 月 24 日发布，但如果您想测试一下，现在可以尝试每晚。

在此之前，如果您想要 Firefox 兼容性，您只需要坚持使用 xlink:href（或两者）。

于 2016-09-06T02:05:09.130 回答