SVG窗口自适应脚本编写
来源:互联网 发布:监控系统网络拓扑图 编辑:程序博客网 时间:2024/06/05 02:20
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);
};
阅读全文
0 0
- SVG窗口自适应脚本编写
- SVG基础二:SVG编写
- IFRAME高度进行自适应 javascript脚本编写【JAVASCRIP】
- 自适应窗口
- 关于SVG自适应-待完善
- SVG脚本编程介绍
- Svg脚本编程简介
- 编写脚本增强windbg堆栈、内存窗口【有码有真相啊】
- svg 打开新的窗口
- SVG多分辨率、自适应缩放解决方案
- SVG脚本及动画实现
- 控件自适应窗口大小
- FormLayout实现自适应窗口
- 模态窗口自适应
- jqGrid ui自适应窗口
- DIV高度自适应窗口
- MFC 窗口自适应分辨率
- Bootstrap 自适应窗口
- 如何追求高质量的代码?
- 近期热门领域新鲜数据集汇总!
- ElasticSearch5.x—条件查询获取所有doc Java实现
- 记录一次phoenix启动报错
- 渲染不确定
- SVG窗口自适应脚本编写
- Spring面试题
- 国际社交平台app
- 微服务拆分需要考虑的必要因素与坚持原则
- poi导入读取时间格式问题
- 网页添加超链接
- Keepalived + Nginx 实现高可用Web负载均衡
- Python中的str与unicode处理方法
- OpenCV-CvMat的像素数据读取方法