使用SVGWeb在页面中插入svg图片

IE6-8不支持svg,需要polyfill,SVGWeb(https://code.google.com/p/svgweb/)。

使用方法:

1、将svg.js, svg.htc, svg.swf三个文件复制到svgweb目录中;

2、在 .htaccess 中添加

1 AddType text/x-component htc

或者修改apache配置文件mine.types,添加:

1 text/x-component htc

3、准备好一个svg图片:pic.svg:

 1 <?xml version="1.0"?>
 2 
 3 <svg
 4   version="1.1"
 5   xmlns="http://www.w3.org/2000/svg"
 6   viewBox="0 0 200 200">
 7   <g
 8     fill="blue" 
 9     style="font-size: 18px; text-anchor: middle; font-family: serif;">
10     <circle
11       id="myCircle" 
12       cx="100" cy="75" r="50"
13       stroke="firebrick"
14       stroke-width="3" />
15     <text x="100" y="155">Hello World</text>
16     <text x="100" y="175">From An SVG File!</text>
17   </g>
18 </svg>

 4、HTML:

1 <!--[if lt IE 9]>
2   <script src="svgweb/svg.js" data-path="svgweb"></script>
3 <![endif]-->
4 
5 <!--[if lt IE 9]>      <object src="pic.svg"  classid="image/svg+xml" width="100" height="100"></object> <![endif]-->
6 <!--[if gt IE 8]><!--> <object data="pic.svg" type="image/svg+xml"    width="100" height="100"></object> <!--<![endif]-->

 

posted @ 2013-08-19 11:05  chenhua89  阅读(1393)  评论(0编辑  收藏  举报