svg图iframe的用法

svg图iframe的用法

1、首先我们来写个html，里面的class id 随便篡改

<div id="mainpage" class="chart_svg">
    <div id="maincontent">
         <iframe class="rt" id="svgframe" scrolling="auto" frameborder="0" style="width: 100%;height: 100%;"></iframe>
    </div>
</div>

2、再者我们写css样式

body,html{
        width: 100%;
        height: 100%;
}
.chart_svg{ width: 100%; height: 9rem;overflow: hidden;}
#mainpage {
	width: 100%;
}

#svgFrame {
	height: 100%;
	width: 100%;
	border: 0px;
}

.rt {
	position: absolute;
}

.maincontent {
	height: 100%;
	width: 100%;
  position: relative;
	padding: 0px;
}
#maincontent{
        width: 100%;
        height: 100%;
    }

3、导入svg

①、采用js原生方法document.getElmentById()，获取iframe标签；

②、采用js原生方法addEventListener监听svg其是否导入成功，如果导入成功就对其进行相应的操作。下面会简述

var svgframe = document.getElementById("svgframe");
    svgframe.src = $url + json.data;（引入svg链接，此乃真实项目地址，不便展示）
    svgframe.addEventListener('load', sendData);
    svgframe.addEventListener('load', setSize);
    svgframe.addEventListener('load', hammerSvg);

4、获取svg数据

①、这里就简略的简述怎么获取svg数据，这个要根据自己请求接口返回数据的实际情况来进行调整

②、我这里的svg数据是实时更新的，看代码也应该看得出来。

function sendData(isNew) {
    try {
        var currSvg = $("#svgframe").attr("src");
        if (isNullOrEmpty(currSvg)) {
            return;
        }
        var ids = $("#svgframe").contents().find("svg text[DeviceNo!=\"\"]").map(function() {
            return this.getAttribute("DeviceNo")
        }).get().join(";");
        if (!isNullOrEmpty(ids)) {
            ids += ";";
        }
        ids = ids + $("#svgframe").contents().find("svg use[DeviceNo!=\"\"]").map(function() {
            return this.getAttribute("DeviceNo")
        }).get().join(";");
         $.ajax({
            url: "",
            data: {
                url: "",
                data: "findRtVarData;" + ids,
                operationId: ''
            },
            dataType: 'json',
            type: 'post',
            xhrFields: { // 跨域cookie打开
                withCredentials: true
            },
            crossDomain: true,
            success: function(response) {
                var result = response;
                if (result.success) {
                    var datas = result.data.split(';');
                    $.each(datas, function(index, data) {
                        var name = data.split(':')[0];
                        var value = data.split(':')[1];
                        var isUpdate = true;
                        if (isNullOrEmpty(varDic[name])) {
                            varDic[name] = value;
                        } else {
                            if (varDic[name] == value) {
                                isUpdate = false;
                            } else {
                                varDic[name] = value;
                            }
                        }
                        if (isUpdate || isNew) {
                            updateSvgElement($("#svgframe"), name, value);
                        }
                    });
                    setTimeout(function() {
                        sendData(false);
                    }, 5000);


                }
            }
        });
    } catch (e) {
        console.log(e);
    }
}

③、改变svg数据主要是改变它的xlink:href，state属性，怎么样改呢，请看下面的代码

function updateSvgElement(svgFrame, name, value) {
    var list = svgFrame.contents().find("svg text[DeviceNo$=\"" + name + "\"]");
    if (list.length > 0) {
        list.each(function() {
            var fm = this.getAttribute("format");
            if (isNullOrEmpty(fm)) fm = "#0.00";
            value = parseFloat(value);
            if (fm.indexOf(".") != -1) {
                var len = fm.split('.')[1].length;
                value = value.toFixed(len);
            }
            list.text(value == "NaN" ? "--" : value);
        });
    }
    list = svgFrame.contents().find("svg use[DeviceNo$=\"" + name + "\"]");
    if (list.length > 0) {
        list.each(function() {
            var link = this.getAttribute("xlink:href");
            var state = this.getAttribute("state");
            var desState = value.substring(0, value.lastIndexOf('.'));
            if (desState != '0') desState = '1';
            if (state != desState) {
                if (state != 0) {
                    link = link.substring(0, link.lastIndexOf(state));
                }
                if (desState != 0) {
                    link = link + desState;
                }
                this.setAttribute("xlink:href", link);
                this.setAttribute("state", desState);
            }
        });
    }
}

5、这里呢，是改变svg的大小与位置的。

主要还是大小问题，因为引入的svg是过大的，不便查看的。

function setSize() {
    var svgDocument = svgframe.getSVGDocument();
    var svgsize = new Object();
    var svgElement = svgDocument.documentElement;
    var width = svgElement.getAttribute("width"); //实际宽度
    var height = svgElement.getAttribute("height"); //实际高度
    var clientWidth = $("#mainpage").width();
    var clientHeight = $("#mainpage").height();
    var widthPercent = clientHeight / width;
    var heightPercent = clientWidth / height;
    svgsize.width = width * widthPercent;
    svgsize.height = height * heightPercent;
    svgElement.setAttribute("width", svgsize.width);
    svgElement.setAttribute("height", svgsize.height);
    svgframe.style.width = svgsize.width;
    svgframe.style.height = svgsize.height;
    svgframe.style.left = (svgsize.width - svgsize.height) / 2;
    svgframe.style.top = (svgsize.width - svgsize.height) / 2;
    svgframe.removeEventListener("load", setSize, true);
}