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

我搜索了类似的问题，但找不到解决方案。.SVG图像显示在Safari，IE，iOS和Android上，但不支持Firefox或Chrome

我想使用SVG图像本网站www.robearnshaw.com的中心标志。

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

任何想法？

来源

2016-01-07 Rob Earnshaw

请在问题（一MCVE）源代码。不要只是链接到需要修复的网站 - 否则，一旦问题解决，这个问题将会给未来访问者带来很大的价值。请参阅[我可以在这里询问哪些主题？]（http://stackoverflow.com/help/on-topic），[我如何提出一个好问题？]（http://stackoverflow.com/help/how - 问）和[如何创建一个最小，完整和可验证的示例]（http://stackoverflow.com/help/mcve）。 – Makyen

如果你看看与浏览器工具的SVG标识元素。你会立即看到问题所在。 <img>的计算宽度和高度为0px。

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

的解决方案是：

添加width和height属性的SVG文件。
指定你的CSS，而不是使用auto的宽度。例如：
```
.fusion-logo img { 
    width: 100px; 
} 
```

来源

2016-01-07 11:10:53

谢谢保罗，在你的帮助下解决了。 –

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

回答

相关问题