Firefox 不显示 SVG

Posted 2023-03-06

【中文标题】Firefox 不显示 SVG

【英文标题】：Firefox not displaying SVG

【发布时间】：2014-03-06 14:16:03

【问题描述】：

我注意到 Firefox 在此页面上没有显示 SVG 徽标 - http://silodrome.com - 它可以在 IE10+ 以及 Chrome 和 Safari 中正常运行，没有任何问题。用于徽标的 CSS 是；

a#logo, a#logo:visited 
            width: 90%;
            max-width: 350px;
            margin: 45px 0 10px 0;
            display: inline-block;
            position: relative;
            z-index: 0;
            

        a#logo img 
            width: 100%;
            height: auto;
            

        a#logo:hover 
            opacity: 0.75;
            

页面上使用的 html 是；

<li><a href="http://silodrome.com" title="Home" id="logo"><img src="http://silodrome.com/wp-content/themes/silodrome/img/logo.svg"    /></a></li>

我一直在无情地谷歌搜索，但找不到解决方案，任何建议将不胜感激，如果需要，我可以提供更多信息。这是一个新的自定义 Wordpress 主题。

【参考方案1】：

一方面，您已将包含 SVG 的 img 的宽度和高度属性明确设置为 0。即使您将这些设置为正确的大小，使用属性也是不好的做法。但是，我认为 Firefox 无论如何都忽略了这一点。至少我无法通过使用开发工具更改属性来使图像重新出现。

我认为您的问题是 SVG 从不报告大小。您在 SVG 文件中定义 viewBox，但不是图像尺寸。因此 Firefox 的 table-cell 大小算法将其缩小到尽可能小：0px × 0px。

解决方案是在 CSS 中指定 HTML 页面的大小，或者将图像本身指定为 width 或 height。 （或者，当然，两者都做。）

【参考方案2】：

从#topLinks li... 中删除display:table-cell 属性似乎可以在Firefox 中正确显示svg，但RSS 提要按钮被向上推！

SVG 没有问题，但问题在于 display 属性！

很快就会发布正确的解决方案:)

【讨论】：

感谢您的回复 Magesh，我一直在研究“显示”属性，但不知道如何解决 RSS 问题。