通过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")},