iframe嵌入svg图片动态更改文本样式并进行缩放等功能实现拓扑图
好久没更了，近期开发遇到的需求，抽空梳理一下~
需求：实现一个复杂的拓扑图，图中元素的个数，以及各个参数内容是动态展示的。
于是让ui提供了对应的svg图片。
解决思路：使用iframe嵌入svg图片，运用D3.js修改其文本及样式。
html：
<iframeclass="systemFrame"ref="systemFrame":src="exportImg(topoSrc)"width="100%"height="100%"frameborder="0" ></iframe>
js：
要从svg图里找到对应的元素id
onMounted(() =>{
let frameObj=systemFrame.value;if(frameObj.attachEvent) {
frameObj.attachEvent("onload", function() {});
}else{
frameObj.onload= function() {
onIframeLoaded()
loading.value= false};
}
getTopo()
})
const onIframeLoaded = () => {
const iframeWindow = systemFrame.value.contentWindow.document;
const svg = iframeWindow.getElementsByTagName('svg')
if(!svg.length) return
svg[0].style.background = '#242424'
// iframe加载完成后要进行的操作
var iframeSvg = systemFrame.value.contentDocument; //!!!!这里获取svgDom,一定要先获取父元素，才会展示子元素！！否则找不到
var svgObj = iframeSvg.getElementById("drawing"); //获取父元素下面id是drawing的子元素，接下来就可以对svgDom进行操作，绑定元素点击事件，改变元素的属性等等
let d3svg = d3.select(svgObj);
// 实现拓扑图缩放功能
svgPanZoom(svgObj, {
zoomEnabled: true,
panEnabled: false,
maxZoom: 2,
minZoom: 0.5,
preventMouseEventsDefault: false,
})
svgEdit(d3svg)
};
const svgEdit = (d3svg) => {
// 改变样式 流动的虚线
d3svg.select("#Right")
.style("animation", "path-animation " + 18 + "s")
.style("animation-timing-function", "linear")
.style("animation-iteration-count", "infinite");
// 循环各个元素 topoSrc是需要展示的元素个数
for(let i=1; i<topoSrc.value*1 + 1; i++) {
// 找到元素并移动位置
d3svg.selectAll('#power-'+ i).attr('transform', 'translate(-15)')
// 找到元素替换文本
d3svg.selectAll('#power-'+ i + ' .cls-20:nth-child(1)').text(topoData.value.packs[i-1].power + 'kW')
// 找到元素替换颜色
d3svg.select('#sys'+ i + ' .cls-24').style("fill", '#fff')
d3svg.select('#cu'+ i).style("fill", '#fff')
}
}