SVG画activity流程图

流程设计器图：

SVG显示图：

//渲染流程图
    $('#flowChart').click(function () {
        setTimeout(function () {
            //去除选中样式
            $("#allUl").find("dd[class=layui-this]").attr("class", "")
        }, 200);
        //单据id
        var dataformId = $("#dataformId").attr("value");
        //根据单据id，查询流程图全图
        $.ajax({
            url: "/dataform/showFlowChart",
            type: "post",
            data: {"dataformId": dataformId},
            async: false,
            success: function (data) {
                console.log(data);
                var locationMap=data.locationMap;
                var flowLocationMap= data.flowLocationMap;
                var flowElementList= data.processes;
                var currTaskSid=data.currTaskSid;
                var historyTask=data.historyTask;
                var heightLine=data.heightLine;
                var rejectLine=data.rejectLine;

                //黑色、绿色、蓝色、红色、灰色
                var colorList=["black","#00CD00","#40E0D0","red","#808080"];
                var color="white";
                if(currTaskSid==undefined){ color=colorList[4];};
                var lineColor="black";
                //定义当前任务阶段id
                var nowUserTask = null;
                //定义所有历史任务的字符串
                var historyTaskStr = '';
                var maxX=0;
                //流程图的html
                var chartHtml = '<svg  id="changeDataForm" style="width: 200%; height: 200%;overflow: scroll" version="1.1%">';
                for (var key in locationMap) {
                    if((locationMap[key].x+locationMap[key].width+100)>maxX){
                        maxX=locationMap[key].x+locationMap[key].width+100;
                    }
                    for(var i in flowElementList){
                        if(key==flowElementList[i].sid){
                            if(flowElementList[i].type=="UserTask"){
                                if(currTaskSid==undefined){ color=colorList[4];}else {
                                    if (currTaskSid == key) {
                                        color = colorList[2];
                                    } else {
                                        if (historyTask.indexOf(key) == -1) {
                                            color = "white"
                                        }
                                        if (historyTask.indexOf(key) != -1 && historyTask.indexOf(key) < historyTask.indexOf(currTaskSid)) {
                                            color = colorList[1]
                                        } else {
                                            color = "white"
                                        }
                                    }
                                }
                                chartHtml += '<rect fill="'+color+'" stroke="#000000" stroke-width="undefined" x="'+locationMap[key].x+'" y="' + locationMap[key].y + '" width="'+locationMap[key].width+'" height="'+locationMap[key].height+'" rx="5"></rect>\n' +
                                    '                            <text style="fill: black;" x="'+(locationMap[key].x+10)+'" y="' + (locationMap[key].y+locationMap[key].width/2-5) + '">\n' +
                                    '                                ' + flowElementList[i].name + '\n' +
                                    '                            </text>';
                            }else if(flowElementList[i].type=="StartEvent"){
                                if(currTaskSid==undefined){ color=colorList[4];}else {
                                    if (currTaskSid == key) {
                                        color = colorList[2];
                                    } else {
                                        if (historyTask.indexOf(key) == -1) {
                                            color = "white"
                                        }
                                        if (historyTask.indexOf(key) != -1 && historyTask.indexOf(key) < historyTask.indexOf(currTaskSid)) {
                                            color = colorList[1]
                                        } else {
                                            color = "white"
                                        }
                                    }
                                }
                                chartHtml += '<circle fill="'+color+'" stroke="#000000" stroke-width="undefined" cx="'+(locationMap[key].x+locationMap[key].width/2)+'" cy="' + (locationMap[key].y+locationMap[key].height/2) + '" r="'+locationMap[key].width/2+'"></circle>\n' +
                                    '                            <text style="fill: black;font-size: 13px" x="'+(locationMap[key].x+1)+'" y="' + (locationMap[key].y+locationMap[key].height/2+2) + '">\n' +
                                    '                                开始\n' +
                                    '                            </text>';
                            }else if(flowElementList[i].type=="EndEvent"){
                                if(currTaskSid==undefined){ color=colorList[4];}else {
                                    if (currTaskSid == key) {
                                        color = colorList[2];
                                    } else {
                                        if (historyTask.indexOf(key) == -1) {
                                            color = "white"
                                        }
                                        if (historyTask.indexOf(key) != -1 && historyTask.indexOf(key) < historyTask.indexOf(currTaskSid)) {
                                            color = colorList[1]
                                        } else {
                                            color = "white"
                                        }
                                    }
                                }
                                chartHtml += '<circle fill="'+color+'" stroke="#000000" stroke-width="undefined" cx="'+(locationMap[key].x+locationMap[key].width/2)+'" cy="' + (locationMap[key].y+locationMap[key].height/2) + '" r="'+locationMap[key].width/2+'"></circle>\n' +
                                    '                            <text style="fill: black;font-size: 13px" x="'+(locationMap[key].x+1)+'" y="' + (locationMap[key].y+locationMap[key].height/2+2) + '">\n' +
                                    '                                结束\n' +
                                    '                            </text>';
                            }else if(flowElementList[i].type=="ExclusiveGateway"){
                                if(currTaskSid==undefined){ color=colorList[4];}else {
                                    if (historyTask.indexOf(key) == -1) {
                                        color = "white"
                                    }
                                    if (historyTask.indexOf(key) != -1 && historyTask.indexOf(key) < historyTask.indexOf(currTaskSid)) {
                                        color = colorList[1]
                                    } else {
                                        color = "white"
                                    }
                                }
                                chartHtml += '<polygon points="'+locationMap[key].x+','+(locationMap[key].y+locationMap[key].height/2)+' '+(locationMap[key].x+locationMap[key].width/2)+','+(locationMap[key].y)+' '+(locationMap[key].x+locationMap[key].width)+','+(locationMap[key].y+locationMap[key].height/2)+' '+(locationMap[key].x+locationMap[key].width/2)+','+(locationMap[key].y+locationMap[key].height)+'" style="fill: '+color+';stroke: #000000;stroke-width: 1"/>';
                            }
                        }
                    }
                }
                for(var key in flowLocationMap){
                    var lineList=flowLocationMap[key];
                    var points="";
                    var closePath="";
                    var thirdNodeY="";
                    var thirdNodeX="";
                    for(var i in lineList) {
                        if(lineList[i].x+100>maxX){
                            maxX=lineList[i].x+100;
                        }

                        points+=lineList[i].x+','+lineList[i].y+' ';
                        if(i==lineList.length-2){
                            thirdNodeY=lineList[i].y;
                            thirdNodeX=lineList[i].x;
                        }
                        if(i==lineList.length-1){
                            if(thirdNodeY==lineList[i].y){
                                if(thirdNodeX<lineList[i].x) {
                                    closePath += "M" + (lineList[i].x - 5) + " " + (lineList[i].y - 5) + " L" + lineList[i].x + " " + lineList[i].y + " L" + (lineList[i].x - 5) + " " + (lineList[i].y + 5) + " Z";
                                }else {
                                    closePath += "M" + (lineList[i].x + 5) + " " + (lineList[i].y - 5) + " L" + lineList[i].x + " " + lineList[i].y + " L" + (lineList[i].x + 5) + " " + (lineList[i].y + 5) + " Z";
                                }
                            }else {
                                if(thirdNodeY>lineList[i].y) {
                                    closePath += "M" + (lineList[i].x - 5) + " " + (lineList[i].y + 5) + " L" + lineList[i].x + " " + lineList[i].y + " L" + (lineList[i].x + 5) + " " + (lineList[i].y + 5) + " Z";
                                }else {
                                    closePath += "M" + (lineList[i].x - 5) + " " + (lineList[i].y - 5) + " L" + lineList[i].x + " " + lineList[i].y + " L" + (lineList[i].x + 5) + " " + (lineList[i].y - 5) + " Z";
                                }
                            }
                        }
                    }
                    if(currTaskSid==undefined){ color=colorList[4];}else {
                        if(rejectLine!=undefined&&rejectLine.indexOf(key)!=-1){
                            lineColor = colorList[3];
                        }else {
                            if (heightLine.indexOf(key) == -1) {
                                lineColor = "black";
                            } else {
                                lineColor = colorList[1];
                            }
                        }
                    }
                    chartHtml += '<polyline points="' + points+'"\n' +
                        '      style="fill:none;stroke:'+lineColor+';stroke-width:1" />' +
                        '<path class="checkLine" fill="'+lineColor+'" stroke="'+lineColor+'" stroke-width="undefined" d="'+closePath+'"></path>';
                }

                chartHtml += '<rect fill="#00CD00" stroke="#000000" stroke-width="undefined" x="'+maxX+'" y="150" width="30" height="15" rx="5"></rect><text style="fill: black;" x="'+(maxX+35)+'" y="161">已执行</text>';
                chartHtml += '<rect fill="#40E0D0" stroke="#000000" stroke-width="undefined" x="'+maxX+'" y="170" width="30" height="15" rx="5"></rect><text style="fill: black;" x="'+(maxX+35)+'" y="181">正在进行</text>';
                chartHtml += '<rect fill="#ffffff" stroke="#000000" stroke-width="undefined" x="'+maxX+'" y="190" width="30" height="15" rx="5"></rect><text style="fill: black;" x="'+(maxX+35)+'" y="201">未执行</text>';
                chartHtml += '<rect fill="#808080" stroke="#000000" stroke-width="undefined" x="'+maxX+'" y="210" width="30" height="15" rx="5"></rect><text style="fill: black;" x="'+(maxX+35)+'" y="221">结束</text>';
                chartHtml += '<path class="checkLine " fill="#000000" fill-opacity="0" stroke="#000000" stroke-width="undefined" d="M '+maxX+' 235 L '+(maxX+30)+' 235"></path><path class="checkLine" fill="#000000" stroke="#000000" stroke-width="undefined" d="M '+(maxX+25)+' 230 L '+(maxX+30)+' 235 L '+(maxX+25)+' 240 Z"></path><text style="fill: black;" x="'+(maxX+35)+'" y="241">未执行</text>';
                chartHtml += '<path class="checkLine " fill="#00CD00" fill-opacity="0" stroke="#00CD00" stroke-width="undefined" d="M '+maxX+' 255 L '+(maxX+30)+' 255"></path><path class="checkLine" fill="#00CD00" stroke="#00CD00" stroke-width="undefined" d="M '+(maxX+25)+' 250 L '+(maxX+30)+' 255 L '+(maxX+25)+' 260 Z"></path><text style="fill: black;" x="'+(maxX+35)+'" y="261">已执行</text>';
                chartHtml += '<path class="checkLine " fill="red" fill-opacity="0" stroke="red" stroke-width="undefined" d="M '+maxX+' 275 L '+(maxX+30)+' 275"></path><path class="checkLine" fill="red" stroke="red" stroke-width="undefined" d="M '+(maxX+25)+' 270 L '+(maxX+30)+' 275 L '+(maxX+25)+' 280 Z"></path><text style="fill: black;" x="'+(maxX+35)+'" y="281">回退</text>';
                chartHtml+= '</svg>';
                document.getElementById('flowCharts').innerHTML = chartHtml;

}