google-chrome - SVG 不会显示

Question

我试图让这个简单的代码工作:

<a href="#" target="_blank" style="display: inline-block;">
    <object data="icons/chrome.svg" type="image/svg+xml" style="pointer-events: none;">
        fallback text
    </object>
</a>

当我使用

data="http://images3.wikia.nocookie.net/__cb20120330024139/logopedia/images/d/d7/Google_Chrome_logo_2011.svg" 

有用。但是，当我将该确切文件保存到我自己的服务器上并按上述方式引用它时，它只会在 Firefox 中显示后备文本。在 Chrome 中，它会在我打开页面时下载文件(这证明文件链接是正确的)。

有谁知道这里发生了什么？

Answer 1

我能想到四种可能:

您的服务器对 SVG 图像使用了错误的 MIME 类型。 (可以通过在 .htaccess 文件中添加 AddType image/svg+xml svg 来修复；other methods discussed here)

您将 SVG 文件保存在其他地方，但它不存在于 icons/chrome.svg . (尝试直接导航到位于 icons/chrome.svg 的 SVG 文件。它是否显示在您的浏览器中？)

您保存文​​件的权限不足，导致您的 Web 服务器无法访问该文件。 (可以通过导航到 icons 目录并在命令行提示符下键入 chmod 0644 chrome.svg 来修复。)

您从 nocookie.net 下载的文件实际上根本不是 SVG 文件。 (尝试在文本编辑器中打开它。)