Question

我有一点问题，我习惯用这种方式使用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>

最近{SVC2}已弃用xlink:href属性，因此我决定从项目中移除所有xlink:href，href MDN Doc

正如您在MDN文档中看到的那样，建议使用href代替xlink:href，它可以在Chrome和Edge上正常使用，但在Firefox上则不行。

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

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

P.D：对不起我的英语。

Answer 1

href支持将到达Firefox 51。

Firefox 51将于2017年1月24日发布，但如果您想测试它，可以立即尝试nightly。

在此之前，如果你想要兼容Firefox，你只需要坚持使用xlink：href（或两者兼而有之）。

SVG不会在Firefox上显示，但在Chrome和Edge中可以正常工作

1 个答案: