SVG不会显示

vee*_*vee 3 svg google-chrome

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

<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>
Run Code Online (Sandbox Code Playgroud)

我用的时候

data="http://images3.wikia.nocookie.net/__cb20120330024139/logopedia/images/d/d7/Google_Chrome_logo_2011.svg" 
Run Code Online (Sandbox Code Playgroud)

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

谁知道这里发生了什么?

squ*_*age 6

我可以想到四种可能性:

  1. 您的服务器使用错误的MIME类型进行SVG图像.(可以通过添加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文件.(尝试在文本编辑器中打开它.)