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);
};
以下是自适应函数:
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);
};