SVG绘制流程图

项目中需要绘制流程图，在网上找了几个开源插件，了解后项目要求都不完全匹配，改代码几乎不可能，代码太长了，看懂都是一个问题！！

因此从零手写，参考了wps和ProcessOn的流程图前端代码，想出两种方案：一、div+canvas；二：svg或div+svg，我们流程图元素不多所以不涉及到性能问题，因此不用考虑太多，两个都可用，本例中使用纯SVG制作流程图，效果如下：

上图是其中一列，可以根据需求绘制出不同的流程图，目前约有1000行代码，还在不断的完善和升级中，代码太多，给出开发过程中重点代码，关键是思路 代码大家看看文档 都会写：

1、如何移动矩形：使用svg的mousemove事件，不断改变矩形的坐标，同时还要改变矩形四个边框中间的圆和矩形相关的箭头，菱形同理；

2、箭头使用什么绘制：使用line和path画直线，其中箭头使用defs；

<svg>
    <!--箭头-->
    <defs xmlns="http://www.w3.org/2000/svg">
        <marker id='markerArrow' markerWidth='8' markerHeight='13' refx='9' refy='5' orient='auto'>
            <path d='M2,2 L2,8 L8,5 L2,2' style='fill: rgb(255, 106, 0)' />
        </marker>
    </defs>
</svg>

3、如何画菱形：使用path，关键点在“d”参数：

	//菱形封装 {id:, type:"pathDiamond", x:,  y:,  width:,  height,text:""}
	getPathD: function (paras) {
		if (!paras.height) paras.height = paras.width*0.6;
		let line1x = paras.x + paras.width / 2;
		let line1y = paras.y - paras.height / 2;
		let line2x = paras.x + paras.width;
		let line2y = paras.y;
		let line3x = paras.x + paras.width / 2;
		let line3y = paras.y + paras.height / 2;
		let d = `m${paras.x},${paras.y} L${line1x},${line1y} L${line2x},${line2y} L${line3x},${line3y} L${paras.x},${paras.y}`;
		paras.d = d;
		return d;
	},

4、如何在矩形上写文字：svg元素不支持直接写文字，只能使用text或相关的元素写文字 ，然后根据矩形的位置定位text的位置，在移动矩形时也要移动text，菱形同理。

我认为关键点就这4点，另外此程序还在开发中，目前只调试了webkit内容的浏览器，像火狐等其他内核还没有调试过，有兴趣的可以一起交流（微信：gbcore）。

本篇使用纯svg实现流程图，也可以看另一篇“div+svg”实现，可下载源码：审批流程图vue+div+svg_高彬的博客-CSDN博客前段时间手写一个画审批流程的功能，当时使用的纯svg实现的，使用期间遇到了一些问题，纯svg实现逻辑会复杂一些，比如：svg矩形不能写文字、元素内不能放子元素等，所以这次使用“DIV+SVG”重新开发一版。上一个纯SVG纯地址是：SVG绘制流程图_高彬的博客-CSDN博客_svg流程图项目中需要绘制流程图，在网上找了几个开源插件，了解后项目要求都不完全匹配，改代码几乎不可能，代码太长了，看懂都是一个问题！！因此从零手写，参考了wps和ProcessOn的流程图前端代码，想出两种方案：一、div+canvhttps://blog.csdn.net/dystocia/article/details/124569587?spm=1001.2014.3001.5501

最后推荐一个：https://github.com/joyceworks/flowchart-vue