.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

回答

相關問題