SVG窗口自适应脚本编写

2 篇文章 0 订阅
2 篇文章 0 订阅
SVG如果嵌入其他如iFrame,当获取到了iFrame的大小后,如何内部做自适应呢?这时只需要在onload事件里写函数,改变svg节点的tramsform,来达到自适应的过程。本实例svg用的是图也SVG编辑器(svgsvg.com)编辑的,svg节点的transform有部分浏览器支持,有部分浏览器不支持,支持的浏览器有谷歌,火狐等,IE不支持,Android 手机端也不支持。
以下是自适应函数:
function fittoWindow()
{
  var nwwidth = window.innerWidth;
  var nwheight = window.innerHeight;
  var svgroot = document.documentElement;
  var nsvgwidth = document.documentElement.getAttribute("width");
  var nsvgheight = document.documentElement.getAttribute("height");
       if(nsvgwidth == undefined)
 nsvgwidth = nwwidth;
  if(nsvgheight == undefined)
     nsvgheight = nwheight;
  var halfwidth = nsvgwidth/2;
  var halfheight = nsvgheight/2;
  var scalex = nwwidth*1.0/nsvgwidth;
  var scaley = nwheight*1.0/nsvgheight;
  var translatex = halfwidth * scalex;
  var translatey = halfheight * scaley;
  var strmatrix = "translate("+translatex+","+translatey+")scale("+scalex+","+scaley+")translate(-"+halfwidth+",-"+halfheight+")";
  document.documentElement.setAttribute("transform",strmatrix);
};
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值