svg绘制简单流程图

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