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

我能想到四种可能:

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

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

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

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