Firefox 不显示 svg 图像答案

【问题标题】：Firefox doesn't show svg imageFirefox 不显示 svg 图像
【发布时间】：2020-05-11 17:48:00
【问题描述】：

我对 Firefox 中的 SVG 文件有一个非常奇怪的问题。这是关于此页面标题中的徽标：dyncheck.de

它在除 Firefox 之外的所有浏览器中都能正确显示。但仅在页眉中。它在页脚中，即使在 Firefox 中也是如此。它也可以在源代码中正确找到，但检查器告诉我它的大小为零。

有没有人对此有解释或解决方案？

提前致谢

【问题讨论】：

给你的图片一个宽度
并在您的问题中添加minimal reproducible example，因为一旦您有了解决方案，您将修复您的网站，而这个问题对其他人毫无价值。
我之前也尝试过的宽度，但这无济于事。并且在页脚中，图像也以 FF 显示，没有宽度。

标签： firefox svg

【解决方案1】：

正如我所评论的：您需要在 CSS 中为图像指定宽度

会发生什么情况是，标题图像在 flexbox 布局中，而您的 svg 图像折叠为 0 宽度，如下所示：

header,footer{border:1px solid; margin:1em;}
header{display:flex;}

<header>
  <div><img src="https://dyncheck.de/images/herpolsheimer-neutral-logo-anthrazit.svg" alt="HERPOLSHEIMER innovativ GmbH &amp; Co. KG Logo"></div>
  <div>header</div>
</header>
<footer>
  <div><img src="https://dyncheck.de/images/herpolsheimer-neutral-logo-anthrazit.svg" alt="HERPOLSHEIMER innovativ GmbH &amp; Co. KG Logo" style="width: 200px;"></div>
  <div>footer</div>
</footer>

为图像添加宽度可以解决您的问题：

    header,footer{border:1px solid; margin:1em;}
    header{display:flex;}

    img{width:200px;}

<header>
      <div><img src="https://dyncheck.de/images/herpolsheimer-neutral-logo-anthrazit.svg" alt="HERPOLSHEIMER innovativ GmbH &amp; Co. KG Logo"></div>
      <div>header</div>
    </header>
    <footer>
      <div><img src="https://dyncheck.de/images/herpolsheimer-neutral-logo-anthrazit.svg" alt="HERPOLSHEIMER innovativ GmbH &amp; Co. KG Logo" style="width: 200px;"></div>
      <div>footer</div>
    </footer>

【讨论】：

好吧，我以为你的意思是 html 宽度，因为它已经有 CSS 宽度，但以百分比表示。在原始站点 herpolsheimer.ag 中，该图像是从中获取的，图像没有宽度并且也被显示。非常混乱