背景 SVG

Question

我尝试使用 svg 作为背景，它在本地工作，但当我将其上传到 ftp 时却不行。

对于 IE 和其他不支持 svg 的设备，它具有 png 后备功能。但在所有情况下，我只看到 png。

（仅作为示例使用红色方块作为 svg 和一个非常不同的认为 skype.png 的标志作为后备）： http://jsfiddle.net/snG8w/ http://codepen.io/pen/9135/2

如何在此背景中放入 svg？

HTML：

<div id="quadrat"></div>​

CSS：

#quadrat {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 400px;
  height: 400px;
  line-height:200px;
  background-image:  url('http://mig-marketing.com/proves/retina/skype.png');
  background-image:  none,url('http://mig-marketing.com/proves/retina/rectangle.svg'), url('http://mig-marketing.com/proves/retina/skype.png');
  background-size: 100% 100%;
  background-repeat:no-repeat;
}​

Answer 1

您正在使用“text/xml”媒体类型为svg image 提供服务。虽然这在技术上没问题，但浏览器很可能在这种情况下不允许这样做，在这种情况下，只允许使用图像。尝试将您的服务器配置为发送官方 svg 媒体类型 'image/svg+xml'，这应该可以。

有关如何配置网络服务器的更多详细信息，请参见 here。

更新：添加了与“text/xml”一起提供的 svg 图像的链接。