vue中，js获取svg内容并填充到svg图中

js获取svg内容并填充到svg图中

最近遇到一个需求，要求前端通过接口获取svg中的内容，并且填充到svg图中，接下来我就记录一下整个实现过程。

  1. 第一步，找到svg图中每一个需要填充的数据的key值，把所有key值交给后端，后端会根据key值把value返回给前端，如下代码中
<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” 这个属性代表key，tags.DT_BB02_sab10a0101r就是key值

  1. 第二步，获取数据并填充到对应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|\n]/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__", // 测点名称的前缀tagVal: "tagTextVal__", //测点值的前缀tagUnit: "tagTextUnit__", //测点单位的前缀tagState: "multistate__", //测点状态的前缀};/*** 删除PB的标签*/// 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类型//   .attr('pbdpttagname', $(item).attr('pbd:pttagname'))	//测点名//   .attr('pbismultistate', $(item).attr('pb:ismultistate'));	// 是否状态// item.attr('pbtype', item.attr('pb:type')).attr('pbdpttagname', item.attr('pbd:pttagname')).attr('pbismultistate', item.attr('pb:ismultistate'));});// 移除文本组中的rect标签$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");// 移除带冒号的pd属性$("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)// }/*** 测点值的展示信息定位*/// this.addTagInfo = function(){// var me = this;// var $svgDiv = $('#'+me.el);var regStr = /\\{2}.+\\{1}/g;// 找到所有标记测点值的地方$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) {// 根据坐标定位测点名称和单位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 (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) {});// 找到状态位$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 && tagName != "") {$item.attr("id", me.prefix.tagState + tagName).attr("type", "pb_multistate").attr("tagname", tagName);}}});// }/*** 初始化viewbox*/// this.doInitViewBox = function(){//处理初始化的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): "";}});},

每一步操作是什么意思备注中都已标注，如果有更好的方法，欢迎留言讨论。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/122128.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【linux】SourceForge 开源软件开发平台和仓库

【linux】SourceForge 开源软件开发平台和仓库

在linux上面安装服务和工具。我们经常会下载安装包。今天推荐一个网站。 SourceForge 开源软件开发平台和仓库 ​ 全球最大开源软件开发平台和仓库 SourceForge.net&#xff0c;又称SF.net&#xff0c;是开源软件开发者进行开发管理的集中式场所。 SourceForge.net由VA Softwa…
阅读更多...
【JAVA学习笔记】50 - Math类，Array类，System类，BigInteger和BigDecimal类

【JAVA学习笔记】50 - Math类，Array类，System类，BigInteger和BigDecimal类

项目代码 https://github.com/yinhai1114/Java_Learning_Code/tree/main/IDEA_Chapter13/src/com/yinhai/wrapper_/math_ https://github.com/yinhai1114/Java_Learning_Code/tree/main/IDEA_Chapter13/src/com/yinhai/wrapper_/array_ https://github.com/yinhai1114/Java_Lea…
阅读更多...
@Embeddable and @ElementCollection 嵌套导致SpringBoot程序无法启动的问题

@Embeddable and @ElementCollection 嵌套导致SpringBoot程序无法启动的问题

遇到了Embeddable and ElementCollection 嵌套导致SpringBoot程序无法启动的问题。现象和StackOverflow上的这个问题一模一样&#xff1a;java - Embeddable and ElementCollection nesting - Stack Overflow。理解了下报错原因&#xff0c;特在此写篇文章记录一下。 具体报错信…
阅读更多...
经常遇到的问题

经常遇到的问题

一个前端经常会遇到的问题 例如&#xff0c;我想要在一个项目里&#xff0c;监听所有的fetch请求&#xff0c;应该怎么办&#xff1f;又或者说&#xff0c;我想用别人封装好的方法&#xff0c;但是在它之前&#xff0c;需要经过一层处理、判断&#xff0c;然后再看情况是否调用…
阅读更多...
centos7 install postgres-15

centos7 install postgres-15

env centos7 1.更新包&#xff0c;避免安装时出错 yum update 2. PostgreSQL: Linux downloads (Red Hat family) sudo yum install -y https://download.postgresql.org/pub/repos/yum/reporpms/EL-7-x86_64/pgdg-redhat-repo-latest.noarch.rpm sudo yum install -y post…
阅读更多...
【iPad已停用】解锁教程

【iPad已停用】解锁教程

iPad多次输错密码时&#xff0c;会自动锁定并停用&#xff0c;这时候你可以使用iTuens或Tenorshare进行解锁。 一、使用iTunes解锁 下载并安装iTunes 使用数据线将iPad连接上电脑 让iPad进入恢复模式&#xff0c;同时安装iPad电源键和Home键&#xff0c;直到Logo出现也不要松…
阅读更多...
【爬虫】python打包可执行程序（ui界面制作完成后）

【爬虫】python打包可执行程序（ui界面制作完成后）

1.安装pyinstaller pip install pyinstaller可能出现连接超时安装不上的情况,可以切换源进行下载 pip install -i http://pypi.douban.com/simple/ pyinstaller2.打包程序 pyinstaller xxxxx.py --noconsole --hidden-import PySide6.QtXml
阅读更多...
Spring Boot发送邮件

Spring Boot发送邮件

在现代的互联网应用中&#xff0c;发送电子邮件是一项常见的功能需求。Spring Boot提供了简单且强大的邮件发送功能&#xff0c;使得在应用中集成邮件发送变得非常容易。本文将介绍如何在Spring Boot中发送电子邮件&#xff0c;并提供一个完整的示例。 1. 准备工作 在开始之前…
阅读更多...
JVM性能优化 —— 类加载器,手动实现类的热加载

JVM性能优化 —— 类加载器,手动实现类的热加载

一、类加载的机制的层次结构 每个编写的”.java”拓展名类文件都存储着需要执行的程序逻辑&#xff0c;这些”.java”文件经过Java编译器编译成拓展名为”.class”的文件&#xff0c;”.class”文件中保存着Java代码经转换后的虚拟机指令&#xff0c;当需要使用某个类时&#…
阅读更多...
docker和K8S环境xxl-job定时任务不执行问题总结

docker和K8S环境xxl-job定时任务不执行问题总结

文章目录 xxl-job 任务调度原理1 问题1 时区导致的任务没有执行的问题解决方案 2 执行器注册和下线导致的问题&#xff08;IP问题&#xff09;解决方案 3 问题3 调度成功&#xff0c;但是执行器的定时任务未执行4 问题4 数据库性能问题&#xff0c;导致查询任务和操作日志数据卡…
阅读更多...
kaggle新赛：AI Village夺旗赛挑战

kaggle新赛：AI Village夺旗赛挑战

赛题名称&#xff1a;AI Village Capture the Flag DEFCON31 赛题链接&#xff1a;https://www.kaggle.com/competitions/ai-village-capture-the-flag-defcon31 赛题背景 夺旗赛这款广受欢迎的竞技游戏&#xff0c;不仅可以在户外进行。数字夺旗赛指的是一系列需要参赛者利…
阅读更多...
软考系列（系统架构师）- 2011年系统架构师软考案例分析考点

软考系列（系统架构师）- 2011年系统架构师软考案例分析考点

试题一 软件架构&#xff08;质量属性效用树、架构风险、敏感点、权衡点&#xff09; 【问题2】&#xff08;13分&#xff09; 在架构评估过程中&#xff0c;需要正确识别系统的架构风险、敏感点和权衡点&#xff0c;并进行合理的架构决策。请用300字以内的文字给出系统架构风险…
阅读更多...
【Python爬虫三天从0到1】Day1：爬虫核心

【Python爬虫三天从0到1】Day1：爬虫核心

目录 1.HTTP协议与WEB开发 &#xff08;1&#xff09;简介 &#xff08;2&#xff09;请求协议和响应协议 2. requests&反爬破解 &#xff08;1&#xff09;UA反爬 &#xff08;2&#xff09;referer反爬 &#xff08;3&#xff09;cookie反爬 3.请求参数 &#x…
阅读更多...
大厂面试题-Java并发编程基础篇（二）

大厂面试题-Java并发编程基础篇（二）

目录 一、wait和notify这个为什么要在synchronized代码块中&#xff1f; 二、ThreadLocal是什么&#xff1f;它的实现原理呢&#xff1f; 三、基于数组的阻塞队列ArrayBlockingQueue原理 四、怎么理解线程安全&#xff1f; 五、请简述一下伪共享的概念以及如何避免 六、什…
阅读更多...
设计模式（16）迭代器模式

设计模式（16）迭代器模式

一、介绍&#xff1a; 1、定义&#xff1a;迭代器模式 (Iterator Pattern) 是一种行为型设计模式&#xff0c;它提供一种顺序访问聚合对象&#xff08;如列表、集合等&#xff09;中的元素&#xff0c;而无需暴露聚合对象的内部表示。迭代器模式将遍历逻辑封装在一个迭代器对象…
阅读更多...
centos7安装配置以及Linux常用命令

centos7安装配置以及Linux常用命令

⭐⭐ linux专栏&#xff1a;linux专栏 ⭐⭐ 个人主页&#xff1a;个人主页 目录 一.CentOS的安装 使用vi编辑ifcfg-ens33 二. 下载MobaXterm软件 2.1MobaXterm的用途 2.2 MobaXterm的使用 2.3下载插件vim 三.Linux常用命令 3.4 vi或vim编辑器 3.4.1 命令模式 3.4.2.…
阅读更多...
StripedFly恶意软件框架感染了100万台Windows和Linux主机

StripedFly恶意软件框架感染了100万台Windows和Linux主机

导语 近日&#xff0c;一款名为StripedFly的恶意软件框架在网络安全研究人员的监视之外悄然感染了超过100万台Windows和Linux系统。这款跨平台的恶意软件平台在过去的五年中一直未被察觉。在去年&#xff0c;卡巴斯基实验室发现了这个恶意框架的真实本质&#xff0c;并发现其活…
阅读更多...
SpringDoc上传附件或文件 - Swagger3

SpringDoc上传附件或文件 - Swagger3

摘要 从Swagger2 升级到 Swagger3 之后发现对于附件出现了问题。 依赖 <dependency><groupId>org.springdoc</groupId><artifactId>springdoc-openapi-ui</artifactId><version>1.7.0</version></dependency>问题描述 在Sw…
阅读更多...
基于51单片机的四种波形信号发生器仿真设计(仿真+程序源码+设计说明书+讲解视频）

基于51单片机的四种波形信号发生器仿真设计(仿真+程序源码+设计说明书+讲解视频）

本设计 基于51单片机信号发生器仿真设计 &#xff08;仿真程序源码设计说明书讲解视频&#xff09; 仿真原版本&#xff1a;proteus 7.8 程序编译器&#xff1a;keil 4/keil 5 编程语言&#xff1a;C语言 设计编号&#xff1a;S0015 这里写目录标题 基于51单片机信号发生…
阅读更多...
CentOS 7

CentOS 7

导入已有虚拟机 设置SSH免密登录 参考Ubuntu- 远程连接虚拟机&#xff08;桥连接&#xff09; 宿主机&#xff1a;Win10虚拟机&#xff1a;VMware保证宿主机和主机在同一个网段下&#xff08;宿主机和主机通过手机热点连接&#xff0c;在特定网段内&#xff0c;不能更改&#…
阅读更多...
最新文章

Copyright @ 2022~2023