Question

我一直试图让一个简单的SVG矩形在IE9或FF4中作为背景工作，但两者都不适用于我。这是我的代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
<div style="height:99px;background-image: url('bar.svg')"></div>
<iframe src="bar.svg" height="99px"></iframe>
</body>
</html>

iframe显示图形但div不显示。我可能会出错的任何想法？

我找到了一个有效的例子here：但我不能让它自己工作:( 这让我发疯了。

感谢您的帮助。

Answer 1

感谢大家的帮助。它实际上是一个Web服务器问题，其中提供了错误的SVG MIME类型＆amp;这使浏览器无法正确呈现。

以下是为我修复它的原因。

第一，我从VS 2010的内置Web服务器切换到IIS Express。然后在我的网络配置中我添加了：

<system.webServer>
    <staticContent>
      <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
    </staticContent>
</system.webServer>

现在一切正常。

Answer 2

我在Joomla遇到了同样的问题！ 2.5在Godaddy Linux服务器上运行。

经过深入研究，我是如何解决这个问题的：

转到Joomla安装的根目录并找到 .htaccess 文件（如果尚未设置，则找到 htaccess.txt ）

现在将这些行添加到文件中：

AddType image/svg+xml svg
AddType image/svg+xml svgz

休息，使用标准的CSS和HTML属性来渲染SVG文件。

Answer 3

这个jsfiddle适合你吗？

http://jsfiddle.net/B3mnk/embedded/result/

fwiw，我添加了一个背景尺寸，让它变得更好。

Answer 4

一些带有示例的文章：

https://jwatt.org/svg/demos/xhtml-with-inline-svg.xhtml

http://helephant.com/2009/08/svg-images-as-css-backgrounds/

https://developer.mozilla.org/en/svg_in_html_introduction

http://www.broken-links.com/2010/06/08/using-svg-in-background-image/ - 这篇文章在文章底部附近有.png的回退。

报告为Firefox中的错误：

https://bugzilla.mozilla.org/show_bug.cgi?id=231179

SVG作为CSS背景

4 个答案: