svg繪製簡單流程圖
阿新 • • 發佈：2019-02-08
通過svg繪製簡單的靜態流程圖
效果如下：
實現方式：
var draw = document.createElementNS("http://www.w3.org/2000/svg","svg"); tar.topDom.append(draw); $(draw).css({"width":"690px","height":"130px"}); var defs=document.createElementNS("http://www.w3.org/2000/svg","defs"); draw.appendChild(defs); defs.appendChild(getSvgMarker("arrow1","#7D7D7D"));//正常顏色 // defs.appendChild(getSvgMarker("arrow2","#00CC8B"));//經過顏色 var json = { "start":{"state":"1","x":20,"y":65,"r":10,"M":30,"L":60,"name":"start"}, "project":{"state":"1","x":60,"y":50,"rx":8,"ry":8,"height":30,"width":70,"M":130,"L":165,"name":tool.text("addProject")}, "slave":{"state":"0","x":165,"y":30,"rx":8,"ry":8,"height":30,"width":70,"M":235,"L":270,"name":tool.text("pic_slave")}, "pile":{"state":"0","x":165,"y":80,"rx":8,"ry":8,"height":30,"width":70,"M":235,"L":270,"name":tool.text("list_pile")}, "task":{"state":"0","x":270,"y":50,"rx":8,"ry":8,"height":30,"width":70,"M":340,"L":370,"name":tool.text("pic_task")}, "calValue":{"state":"0","x":370,"y":50,"rx":8,"ry":8,"height":30,"width":70,"M":440,"L":470,"name":tool.text("pic_calValue")}, "perfusion":{"state":"0","x":470,"y":50,"rx":8,"ry":8,"height":30,"width":70,"M":540,"L":565,"name":tool.text("pic_perfusion")}, "export":{"state":"0","x":565,"y":50,"rx":8,"ry":8,"height":30,"width":80,"M":645,"L":670,"name":tool.text("pic_export")}, "end":{"state":"0","x":680,"y":65,"r":10,"M":30,"L":60,"name":"end"} } function createNode(k,v){ var node; var g=document.createElementNS("http://www.w3.org/2000/svg","g"); var text=document.createElementNS("http://www.w3.org/2000/svg","text"); g.setAttribute("type",k); if(k=="start" || k=="end"){ node=document.createElementNS("http://www.w3.org/2000/svg","circle"); node.setAttribute("cx",v.x);//圓點y座標 node.setAttribute("cy",v.y);//圓點x座標 node.setAttribute("r",v.r);//圓半徑 text.setAttribute("x",v.x); text.setAttribute("y",v.y-v.r); // if(v.state=="0"){ text.setAttribute("fill","#FB923F"); // }else{ // text.setAttribute("fill","#00CC8B"); // } }else{ node=document.createElementNS("http://www.w3.org/2000/svg","rect"); node.setAttribute("x",v.x);//矩形的左側位置 node.setAttribute("y",v.y);//矩形的頂部位置 node.setAttribute("rx",v.rx);//圓角 node.setAttribute("ry",v.ry);//圓角 node.setAttribute("height",v.height);//矩形的高度 node.setAttribute("width",v.width);//矩形的寬度 text.setAttribute("x",v.x+v.width/2); text.setAttribute("y",v.y+20); text.setAttribute("fill","white"); } node.setAttribute("id",k); // if(v.state=="0"){ node.setAttribute("fill","#FB923F");//0表示未通過矩形的填充顏色為黃 // }else{ // node.setAttribute("fill","#00CC8B");//1表示通過矩形的填充顏色為黃 // } text.setAttribute("text-anchor","middle"); text.style.fontSize="0.9em"; text.textContent=v.name; g.appendChild(node); g.appendChild(text); draw.appendChild(g); } function createLine(k,v,type){ var g=document.createElementNS("http://www.w3.org/2000/svg","g"); var pathLine=document.createElementNS("http://www.w3.org/2000/svg","path"); // if(v.state=="0"){//0表示未通過的線為灰色，箭頭為灰色 pathLine.setAttribute("marker-end","url(#arrow1)"); pathLine.setAttribute("stroke","#CCC");//線顏色 // }else{ // pathLine.setAttribute("marker-end","url(#arrow2)"); // pathLine.setAttribute("stroke","#00CC8B");//線顏色 // } if(k=="start"){ pathLine.setAttribute("d","M"+v.M+" 65 L"+v.L+" 65"); }else if(k=="project" && type=="up"){ pathLine.setAttribute("d","M"+v.M+" 60 L"+v.L+" 45"); }else if(k=="project" && type=="down"){ pathLine.setAttribute("d","M"+v.M+" 70 L"+v.L+" 95"); }else if(k=="slave"){ pathLine.setAttribute("d","M"+v.M+" 45 L"+v.L+" 60"); }else if(k=="pile"){ pathLine.setAttribute("d","M"+v.M+" 95 L"+v.L+" 70"); }else{ pathLine.setAttribute("d","M"+v.M+" 65 L"+v.L+" 65"); } g.appendChild(pathLine); draw.appendChild(g); } for(var i in json){ var value = json[i]; switch (i){ case "start": createNode(i,value); createLine(i,value); break; case "project": createNode(i,value); createLine(i,value,"up"); createLine(i,value,"down"); break; case "slave": createNode(i,value); createLine(i,value); break; case "pile": createNode(i,value); createLine(i,value); break; case "task": createNode(i,value); createLine(i,value); break; case "calValue": createNode(i,value); createLine(i,value); break; case "perfusion": createNode(i,value); createLine(i,value); break; case "export": createNode(i,value); createLine(i,value); break; case "end": createNode(i,value); break; } }