html5实现流程图

之前在IE盛行，微软一家独大的时候，web绘图功能首选就是VML，IE5.0以上的版本都支持VML，VML能够在IE中经过文本的方式绘制矢量图像，相似在html页面中实现了画笔的功能，因此被不少人采用来实现web流程设计器。

随着手机，ipad等各类移动设备的升级，愈来愈多的应用要求支持这些移动设备。很惋惜VML只支持IE，手机和ipad大部分是chrome和safari，不支持VML，web绘制流程图的功能，要实现跨浏览器，必须采用别的技术。

svg是Scapable Vector Graphics,可缩放的矢量图像，是互联网联盟W3C推荐的标准，符合XML节点的规则，用XML来描述二维图像的语言。和VML相似，都是用文原本描述二维图像的语言，而且SVG是W3C的标准，几乎全部浏览器都支持，可是IE5-IE8又有特殊了，须要下载adobe的SVGView插件才能查看。

为了兼容已经用VML作好的绘图功能，而且兼容用IE的客户，因此咱们在实现web流程设计器的绘图功能时，须要根据浏览器来切换，当IE浏览器时，咱们用VML来绘图，当其余浏览器时，用SVG来绘图，作到自动切换，让用户感受不到不一样，这是最好的。

VML和SVG的区别：
VML的优势：
XML标准，文本标记，表示方法简单。
高质量的矢量图像，支持多种不一样的矢量图形元素：
 Shape 
 Line 
 Polyline
 Path
 Curve 
 Rect
 Roundrect
 Group
 Oval
 Arc
能够方便的嵌入html文件。
兼容DHTML的大部分属性和事件。如，id,title,onmouseover等等，还能够自定义属性。

支持动画和交互

SVG支持任意的几何图形，渐变色，滤镜，动画等。而且，VML有的那些有点，SVG也有，如
基于XML标准
高质量的矢量图像
文本描述的二维图像
另外，SVG比VML还有一些优势
灵活的文件格式
支持交互和动画
支持字符查找
支持Xlink和Xpointer

利用VML和SVG的相同和不一样，咱们在绘制流程图的时候，根据浏览器的不一样，切换到不一样的技术。如IE中，咱们用VML来划线：

同一个流程，Safari中绘制的流程图：

 

线条的粗细稍有不一样，位置形状彻底一致，自动切换，终端用户使用中感受不到差别。

标签: web开发平台, java工做流, 流程设计器, 自定义工做流, web工做流, 自定义表单, 工做流引擎, .net工做流