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);
}