zoukankan      html  css  js  c++  java
  • svg流程设计器跨浏览器的首选

    以前在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中绘制的流程图:

    线条的粗细稍有不同,位置形状完全一致,自动切换,终端用户使用中感觉不到差异。

  • 相关阅读:
    学业优秀者汇总
    计算机类教学质量国家标准(含信息安全专业)
    从《构建之法》到《终身幼儿园》
    2019-2020-1 《信息安全专业导论》教学进程
    程序设计快速入门
    铜齿铁牙UP计划
    ios app 提交评审注意事项
    IOS开发之不同版本适配问题2(#ifdef __IPHONE_7_0)
    iOS:个性化UITextView(缩进,行距,铺满)
    iOS 同一设备内的应用之间资源共享的实现
  • 原文地址:https://www.cnblogs.com/webreport/p/2744337.html
Copyright © 2011-2022 走看看