SVG作为CSS背景

Question

I've been trying to get a simple SVG rectangle to work as a background in IE9 or FF4 and neither is working for me. 我一直试图让一个简单的SVG矩形在IE9或FF4中作为背景工作，但它们都不适用于我。 Here's my code: 这是我的代码：

<!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>

The iframe shows the graphic but the div does not. iframe显示图形，但div不显示。 Any ideas where I may be going wrong? 我可能会出错的任何想法？

I found a working example here : But I can't make it work myself :( It's been driving me crazy. 我在这里找到了一个有效的例子：但我不能让它自己工作:(这让我发疯了。

Thanks for any help. 谢谢你的帮助。

Answer 1

Thanks everyone for the help. 谢谢大家的帮助。 It actually was a web server problem where the wrong MIME type for SVG was being served & that made the browsers fail to render correctly. 它实际上是一个Web服务器问题，其中提供了错误的SVG MIME类型，并且导致浏览器无法正确呈现。

Here's what fixed it for me. 这是为我修复它的原因。

1st I switched from VS 2010's built-in web server to IIS Express. 第一，我从VS 2010的内置Web服务器切换到IIS Express。 Then in my web config I added: 然后在我的网络配置中我添加了：

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

Now everything works correctly. 现在一切正常。

Answer 2

I was having the same problem in Joomla! 我在Joomla遇到了同样的问题！ 2.5 running on Godaddy Linux server. 2.5在Godaddy Linux服务器上运行。

After intense research here is how I fixed the problem: 经过深入研究，我是如何解决这个问题的：

Go to the root directory of your Joomla install and locate the .htaccess file (or htaccess.txt if it is not already setup) 转到Joomla安装的根目录并找到.htaccess文件（如果尚未设置，则找到htaccess.txt ）

Now add these lines to the file: 现在将这些行添加到文件中：

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

Rest, use the standard CSS and HTML properties to render your SVG file. 休息，使用标准的CSS和HTML属性来呈现SVG文件。

Answer 3

Does this jsfiddle work for you? 这个jsfiddle适合你吗？

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

fwiw, I've added a background size to make it nice 'n big. fwiw，我添加了一个背景尺寸，让它变得更好。

Answer 4

Some articles with examples: 一些带有例子的文章：

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

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

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

http://www.broken-links.com/2010/06/08/using-svg-in-background-image/ - This one has a fallback to .png near the bottom of the article. http://www.broken-links.com/2010/06/08/using-svg-in-background-image/ - 这篇文章底部靠近.png。

Reported as a bug in Firefox: 报告为Firefox中的错误：

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

SVG作为CSS背景

问题描述

4 个解决方案

解决方案1
8 已采纳 2011-03-23 20:15:22

解决方案2
3 2012-06-04 06:55:59

解决方案3
1 2011-03-23 18:37:56

解决方案4
0 2011-03-23 18:53:22

SVG作为CSS背景

问题描述

4 个解决方案

解决方案1 8 已采纳 2011-03-23 20:15:22

解决方案2 3 2012-06-04 06:55:59

解决方案3 1 2011-03-23 18:37:56

解决方案4 0 2011-03-23 18:53:22

解决方案1
8 已采纳 2011-03-23 20:15:22

解决方案2
3 2012-06-04 06:55:59

解决方案3
1 2011-03-23 18:37:56

解决方案4
0 2011-03-23 18:53:22