js gets the svg content and fills it into the svg image
Recently, I encountered a requirement that requires the front end to obtain the content in svg through the interface and fill it into the svg image. Next, I will record the entire implementation process.
- The first step is to find the key value of each data that needs to be filled in the svg image, and hand all key values to the backend. The backend will return the value to the frontend based on the key value, as in the following code
<g id="Value11" fill="#00FF00" stroke="none" font-family="Arial" font-size="29.9999988079072" PB:DisplayPointName="9" PB:DisplayTimeStamp="9" PB :HorzAlign="0" PB:ShowUOM="False" PB:IsMultiState="False" PB:NumberFormat="0.00" PBD:PtTagName="\10.37.169.174\tags.DT_BB02_sab10a0101r" PB:PersistString="" PB: PtTagStatus="0" PB:PtTagTime="1970/1/1 8:00:00" PB:PtTagValue="No Data" PB:Type="7" PB:Visible="True" PB:Scripting="True" > <rect id="Value11_pbTextBoundingRectEl" x="4387" y="782" width="142" height="40" fill="none" stroke-width="0"> </rect> <text id="Value11_pbTextEl" x="4458" y="812" fill="#00FF00" stroke="none" font-family="Arial" font-size="29.9999988079072" text-anchor="middle" PBD :Property="value">No Data</text> </g>
PBD:PtTagName=”\10.37.169.174\tags.DT_BB02_sab10a0101r” This attribute represents the key, tags.DT_BB02_sab10a0101r is the key value
- The second step is to obtain the data and fill it into the corresponding key.
querySvgTableById() {<!-- -->
let data = {<!-- -->
plantId: this.powerPlantId,
unitId: this.unitId,
svgtableId: this.currentSort + 1,
};
querySvgTableById(data).then((res) => {
this.svgData = res.data;
this.svgInfo();
});
},
svgInfo() {
try {
if (this.indexA != 0) {
let Econtent = document.getElementById("e-content");
let temp = document.getElementById("svgWrap");
Econtent.removeChild(temp);
}
this.indexA + + ;
let svg = "";
if (this.currentSort == 0) {
svg = require(`@/assets/svg/dtbb.svg`);
} else if (this.currentSort == 1) {
svg = require(`@/assets/svg/dtbb1.1.svg`);
} else if (this.currentSort == 2) {
svg = require(`@/assets/svg/dtbb1.2.svg`);
}
this.renderAsSvg(svg);
} catch (err) {
this.hasSvg = false;
}
},
async renderAsSvg(url) {
const xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.send();
xhr.addEventListener("load", async () => {
const resXml = xhr.responseXML;
this.svgDom = resXml.documentElement.cloneNode(true);
const oSerializer = new XMLSerializer();
const paths = this.svgDom.getElementsByTagName("path");
for (const item of paths) {
if (item.attributes.d.value) {
item.attributes.d.value = item.attributes.d.value.replace(
/[\r|\
]/g,
""
);
}
}
const text = this.svgDom.getElementsByTagName("text");
const textIds = [];
for (const item of text) {
if (item.innerHTML === "--") {
item.innerHTML = "@";
textIds.push(item.id);
}
}
await this.getSvgData(textIds);
const sXml = oSerializer.serializeToString(this.svgDom);
if (this.indexA == 1) {
const Profile = Vue.extend({
template: `<div id='svgWrap' style="margin-top:10px;">${sXml}</div>`,
});
new Profile().$mount("#e-content2");
} else {
var temp = document.createElement("div");
temp.id = "svgWrap";
temp.innerHTML = `${sXml}`;
document.getElementById("e-content").appendChild(temp);
}
// const Profile = Vue.extend({
// template: `<div id='svgWrap' style="margin-top:10px;">${sXml}</div>`,
// });
// new Profile().$mount("#e-content");
this.PSC(sXml);
for (let item in this.textIds) {
var s = document.getElementById(this.textIds[item]);
}
});
xhr.addEventListener("error", (err) => {
this.svgDom = null;
// this.hasSvg = false;
});
},
PSC(el) {
this.el = el;
this.prefix = {
tagName: "tagTextName__", // Prefix of measuring point name
tagVal: "tagTextVal__", //Prefix of measuring point value
tagUnit: "tagTextUnit__", //Prefix of measuring point unit
tagState: "multistate__", //Prefix of measuring point state
};
/**
* Delete PB label
*/
// this.delPbLabel = function(){
var me = this;
var $svgDiv = $("svg");
// var $svgDiv = me.el;
$("defs").remove();
// $("pb\:dataset").remove();
$("desc").remove();
$svgDiv.find("script").remove();
// $svgDiv.find('svg:first').attr('xmlns', "http://www.w3.org/2000/svg").attr('version', "1.0");
$svgDiv.attr("xmlns", svgPath).attr("version", '1.0').attr("id",this.currentSort + '_' + this.indexA).attr("PB:pid", '');
$svgDiv.removeAttr("xmlns:pbi").removeAttr("xmlns:pbd")
// $('rect,g,polygon,line,polyline,text,path').each(function(i, item){
$("rect,g,polygon,line,polyline,text,path").each(function (i, item) {
if (item.getAttribute("PB:Type") != null) {
$(item).attr("pbtype", item.getAttribute("PB:Type"));
}else if(item.getAttribute("pb:type") != null){<!-- -->
$(item).attr("pbtype", item.getAttribute("pb:type"));
}
if (item.getAttribute("PBD:PtTagName") != null) {<!-- -->
$(item).attr("pbdpttagname", item.getAttribute("PBD:PtTagName"));
}else if(item.getAttribute("pbd:pttagname") != null){<!-- -->
$(item).attr("pbdpttagname", item.getAttribute("pbd:pttagname"));
}
if (item.getAttribute("PB:IsMultiState") != null) {<!-- -->
$(item).attr("pbismultistate", item.getAttribute("PB:IsMultiState"));
}else if(item.getAttribute("pb:ismultistate") != null){<!-- -->
$(item).attr("pbismultistate", item.getAttribute("pb:ismultistate"));
}
// $(item).attr('pbtype', $(item).attr('pb:type')) // pb type
// .attr('pbdpttagname', $(item).attr('pbd:pttagname')) //Measurement point name
// .attr('pbismultistate', $(item).attr('pb:ismultistate')); // Whether it is status
// item.attr('pbtype', item.attr('pb:type')).attr('pbdpttagname', item.attr('pbd:pttagname')).attr('pbismultistate', item.attr( 'pb:ismultistate'));
});
//Remove the rect tag in the text group
$svgDiv.find("g[pbtype='4'],g[pbtype='7']").find("rect").remove();
$("svg")
.removeAttr("pb:pid")
.removeAttr("xsi:schemalocation")
.removeAttr("image-rendering")
.removeAttr("xlink:xid")
.removeAttr("xmlns:svg")
.removeAttr("xmlns:BP")
.removeAttr("xmlns:PBI")
.removeAttr("xmlns:PBD")
.removeAttr("xmlns:xsi")
.removeAttr("onload");
// Remove the pd attribute with colon
$("rect,g,polygon,line,polyline,text,path")
.removeAttr("pb:docmajorversionnum")
.removeAttr("PB:docminorversionnum")
.removeAttr("PB:Docgroup")
.removeAttr("PB:Wnheight")
.removeAttr("PB:Wnwidth")
.removeAttr("PB:Wnstate")
.removeAttr("PB:Zoom")
.removeAttr("PB:Type")
.removeAttr("pb:type")
.removeAttr("PB:Namedvalues")
.removeAttr("PB:IsMultiState")
.removeAttr("PB:Visible")
.removeAttr("pb:visible")
.removeAttr("PB:Lineends")
.removeAttr("PB:LineStyle")
.removeAttr("PB:Strikethroughandunderline")
.removeAttr("PB:Fillcolor")
.removeAttr("PB:Fillstyle")
.removeAttr("PB:Backgroundcolor")
.removeAttr("PB:Tbhandle")
.removeAttr("PB:Rotation")
.removeAttr("PB:Flip")
.removeAttr("PB:Scripting")
.removeAttr("pb:scripting")
.removeAttr("PB:Archeight")
.removeAttr("PB:Arcleft")
.removeAttr("PB:Arcwidth")
.removeAttr("PB:Arctop")
.removeAttr("PB:Endangle")
.removeAttr("PB:Linecolor")
.removeAttr("PB:Startangle")
.removeAttr("PB:Endpoints")
.removeAttr("PB:Arcleft")
.removeAttr("PB:Localid")
.removeAttr("PB:Displayservertimezone")
.removeAttr("PB:Displaypointname")
.removeAttr("PB:Displaytimestamp")
.removeAttr("PB:Showuom")
.removeAttr("PB:Numberformat")
.removeAttr("PBD:Pttagname")
.removeAttr("PB:Persiststring")
.removeAttr("PB:Pttagtime")
.removeAttr("PB:Pttagstatus")
.removeAttr("PB:Pttagvalue")
.removeAttr("PBD:Property")
.removeAttr("PB:Flow")
.removeAttr("PB:Lower")
.removeAttr("PB:Orientation")
.removeAttr("PB:Start")
.removeAttr("PB:Upper")
.removeAttr("PB:horzalign");
// console.log("$svgDiv=>",$svgDiv)
// }
/**
* Display information positioning of measuring point values
*/
// this.addTagInfo = function(){<!-- -->
// var me = this;
// var $svgDiv = $('#' + me.el);
var regStr = /\{<!-- -->2}. + \{<!-- -->1}/g;
//Find all places where the measured point values are marked
$svgDiv.find("g[pbtype='7']").each(function (i, item) {<!-- -->
var $item = $(item);
var tagName = $item
.attr("pbdpttagname")
.replace(regStr, "")
.toUpperCase();
if (me.svgData[i].key == tagName) {<!-- -->
$item
.find("text")
.attr("id", me.prefix.tagVal + tagName)
.attr("type", "tagTextVal")
.attr("tagname", tagName)
.text(me.svgData[i].value);
}
me.textIds.push(tagName);
var tagTextValX = $item.find("text").attr("x");
tagTextValX = tagTextValX ? parseFloat(tagTextValX) : undefined;
$item.siblings().each(function (i2, item2) {<!-- -->
var $text2 = $(item2).find("text");
if (tagTextValX) {<!-- -->
// Locate the measuring point name and unit according to the coordinates
var tagTextX = parseFloat($text2.attr("x"));
if (isNaN(tagTextX)) return false;
if (tagTextX < tagTextValX) {<!-- -->
me.textName.push($(item2).find("text")[0].innerHTML);
$text2
.attr("id", me.prefix.tagName + tagName)
.attr("type", "tagTextName");
} else if (tagTextX > tagTextValX) {<!-- -->
$text2
.attr("id", me.prefix.tagUnit + tagName)
.attr("type", "tagTextUnit");
}
} else {<!-- -->
// If there are no coordinates, the first one is the name and the second one is the unit.
if (i2 == 0) {<!-- -->
$text2
.attr("id", me.prefix.tagName + tagName)
.attr("type", "tagTextName");
} else if (i2 == 1) {<!-- -->
$text2
.attr("id", me.prefix.tagUnit + tagName)
.attr("type", "tagTextUnit");
}
}
});
});
$svgDiv.find("g[pbtype='7']").each(function (i, item) {<!-- -->
});
// find the status bit
$svgDiv.find("[pbismultistate='True']").each(function (i, item) {<!-- -->
var $item = $(item);
var pbdpttagname = $item.attr("pbdpttagname");
pbdpttagname = pbdpttagname
?pbdpttagname
: $item.find("pb\:multistate").attr("pbd:pttagname");
if (pbdpttagname) {<!-- -->
var tagName = pbdpttagname.replace(regStr, "").toUpperCase();
if (tagName & amp; & amp; tagName != "") {<!-- -->
$item
.attr("id", me.prefix.tagState + tagName)
.attr("type", "pb_multistate")
.attr("tagname", tagName);
}
}
});
// }
/**
* Initialize viewbox
*/
// this.doInitViewBox = function(){<!-- -->//Process the initialized viewbox
// var me = this;
var $svg = $(me.divId).find("svg:first");
var initViewBoxValues = [];
var $rect = $svgDiv.find("rect[pbtype='55']");
initViewBoxValues.push(0);
initViewBoxValues.push(0);
initViewBoxValues.push(185);
initViewBoxValues.push(185);
$svgDiv.get(0).setAttribute("viewBox", initViewBoxValues.join(" "));
// }
return true;
},
async getSvgData(keys) {<!-- -->
const params = {<!-- -->
tags: [],
codes: [],
};
keys.forEach((item) => {
if (item.includes("__")) {<!-- -->
const paramsKey = item.split("__")[1]; //__
paramsKey.includes("TAGS") || paramsKey.includes("CALS")
? params.tags.push(paramsKey)
: paramsKey.includes("TOTAL")
? params.codes.push(paramsKey)
: "";
}
});
},
The meaning of each step of operation has been marked in the remarks. If there is a better method, please leave a message for discussion.