SVG不显示在Firefox，但在Chrome和边缘正常工作

我有一个小问题，我已经习惯通过这种方式使用SVG图标：SVG不显示在Firefox，但在Chrome和边缘正常工作

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离开hrefMDN Doc

正如你可以在MDN文件中，建议决定见重要的是使用href而不是xlink:href，它在Chrome和Edge上运行良好，但在Firefox上无效。

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

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

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

来源

2016-09-05 Pablo Carballeda

是的，我一直在寻找解决方案，我认为最好的解决方案是回到xlink：href。谢谢 –

href支持将抵达Firefox 51。

Firefox 51将于2017年1月24日发布，但如果您想对其进行测试，您现在可以尝试nightly。

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

来源

2016-09-06 02:05:09

SVG不显示在Firefox，但在Chrome和边缘正常工作

回答

相关问题