使用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]-->

 

转载于:https://www.cnblogs.com/chenhua89/p/3267405.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值