SVG 作为 CSS 背景
我一直在尝试让一个简单的 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 不显示。有什么想法我可能会出错吗？
我在此处找到了一个工作示例： 但我自己无法让它发挥作用:( 这让我发疯。
感谢您的任何帮助。
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. 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. 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.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
感谢大家的帮助。这实际上是一个 Web 服务器问题，其中为 SVG 提供了错误的 MIME 类型并导致错误。这使得浏览器无法正确渲染。
这就是为我解决的问题。
第一次我从 VS 2010 的内置 Web 服务器切换到 IIS Express。然后在我的网络配置中添加：
现在一切正常。
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.
Here's what fixed it for me.
1st I switched from VS 2010's built-in web server to IIS Express. Then in my web config I added:
Now everything works correctly.
我在 Joomla 中遇到了同样的问题！ 2.5 运行在Godaddy Linux 服务器上。
经过深入研究，我解决了这个问题：
转到 Joomla 安装的根目录并找到 .htaccess 文件（或者 htaccess.txt，如果还没有） setup)
现在将这些行添加到文件中：
其余，使用标准 CSS 和 HTML 属性来渲染 SVG 文件。
I was having the same problem in Joomla! 2.5 running on Godaddy Linux server.
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)
Now add these lines to the file:
Rest, use the standard CSS and HTML properties to render your SVG file.
这个 jsfiddle 对你有用吗？
http://jsfiddle.net/B3mnk/embedded/result/
fwiw，我添加了背景尺寸使其美观大方。
Does this jsfiddle work for you?
http://jsfiddle.net/B3mnk/embedded/result/
fwiw, I've added a background size to make it nice 'n big.
一些带有示例的文章：
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
Some articles with examples:
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/ - This one has a fallback to .png near the bottom of the article.
Reported as a bug in Firefox:
https://bugzilla.mozilla.org/show_bug.cgi?id=231179