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中，当我打开页面时会下载该文件（这证明了文件链接的正确性）。

有人知道这里出了什么问题吗？

- vee

Answer 1

我可以想到四种可能性：

1. 您的服务器对SVG图像使用了错误的MIME类型。(可以通过将AddType image/svg+xml svg添加到您的.htaccess文件来解决；这里讨论了其他方法)

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

3. 您以不充分的权限保存了文件，导致您的Web服务器无法访问该文件。(可以通过转到icons目录并在命令行提示符处键入chmod 0644 chrome.svg来解决。)

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

- r3mainer

---

感谢您的回复。我认为问题出在＃1上。虽然.htaccess文件无法正常工作，但我能够通过将以下内容放入位于根目录下的web.config文件中从我的服务器获取SVG显示： <configuration> <system.webServer> <staticContent> <remove fileExtension=".svg" /> <mimeMap fileExtension=".svg" mimeType="image/svg+xml" /> </staticContent> </system.webServer> </configuration> 供参考，我正在使用Godaddy托管。现在我遇到了链接不起作用的问题，但我正在调查。 - vee

Answer 2

我遇到了@r3mainer描述的第一个问题。

在我的lighttpd服务器上，问题是由缺失引起的

  ".svg"          =>      "image/svg+xml",

在 lighttpd 配置文件的 mimetype.assign 部分中的行。

- Scrooge McDuck