.SVG 图像在 Safari、IE、iOS 和 Android 上显示，但在 Firefox 或 Chrome 上不显示

Question

我搜索了类似的问题，但找不到解决方案。

我想在这个网站 www.robearnshaw.com 上使用 SVG 图像作为中心徽标。

我以前有这个工作，但现在在 Wordpress 上安装常规 SVG 支持插件后，图像只是没有在 Firefox 或 Chrome 上呈现，但在我尝试过的所有其他浏览器上显示正常。我尝试了几种 SVG 格式，结果没有改变。查看 Chrome 上的资产表明该文件的链接在那里。它只是不会显示在网页本身上。

有什么想法吗？

Answer 1

如果您使用浏览器工具查看 SVG 徽标元素。您将立即看到问题所在。 <img> 的计算宽度和高度为 0px。

问题的原因是 JPEG 和 PNG 等位图图像具有固有的宽度和高度。 SVG 文件并非总是如此。您的徽标 SVG 就是一个不这样做的示例，因为它没有在其根 <svg> 标记中指定宽度或高度。所以width: auto 在这种情况下不起作用。

解决办法是：

1. 将width 和height 属性添加到您的SVG 文件中。

2. 在 CSS 中指定宽度，而不是使用 auto。例如：

   .fusion-logo img {
       width: 100px;
   }