IMG標籤中的SVG在移動Safari/iOS中不顯示Chrome

我正嘗試在IMG標籤中使用SVG文件。在我的本地環境中工作，但在推送到服務器時不會。我認爲我對提供的文檔類型有問題，但無法解決如何解決該問題。下面是加載SVG代碼：IMG標籤中的SVG在移動Safari/iOS中不顯示Chrome

<img src="images/icon-reputation.svg" />

這裏是我的DOCTYPE和標題信息：

<html> 
<head> 
<meta charset="utf-8" /> 
<meta name="viewport" content="user-scalable=yes, width=device-width, initial-scale=1.0, maximum-scale=1.0" /> 
<title>SVG</title> 
</head>

任何線索？謝謝。

來源

2014-08-27 Rodrigo Galindez

如果包含svg內聯，它會工作嗎？即用包含您的.svg文件內容的svg標籤替換img標籤？ caniuse.com似乎認爲，這個img標籤的svg應該在幾乎所有地方都能正常工作。 – OldGeeksGuide 2014-08-27 20:44:12

是的，它使用內聯SVG。我寧願通過IMG標籤獲取.svg。 – 2014-08-27 20:47:20

Bummer，理論上我期望它能夠工作，但實際上我發現它有點不安。您也可以嘗試使用JavaScript加載svg文件並將其作爲svg元素插入，但這也可能非常棘手。 – OldGeeksGuide 2014-08-27 20:59:00

確保您的Web服務器正在使用正確的ContentType提供SVG文件。您可以通過查看（桌面）瀏覽器開發人員工具的網絡/網絡部分來查看類型。

配置服務器的方式當然取決於服務器。但是，例如，對於Apache而言，它是：

AddType image/svg+xml svg

來源

2014-08-27 22:35:35

IMG標籤中的SVG在移動Safari/iOS中不顯示Chrome

回答

相關問題