SVG as a CSS background_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-02-19 12:06 出处：网络

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:

相关专题：css svg

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 d开发者_JAVA技巧oes 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.

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:

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

Now everything works correctly.

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:

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

Rest, use the standard CSS and HTML properties to render your SVG file.

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.

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

SVG as a CSS background

精彩评论

关注公众号

热门标签

图文推荐

SVG as a CSS background

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：