`
eworkflow
  • 浏览: 220298 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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



 

 

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

  • 大小: 11.3 KB
  • 大小: 12.2 KB
3
1
分享到:
评论

相关推荐

    VML和SVG矢量图形库

    SVG支持透明度、渐变、滤镜效果和动画,使其成为现代Web设计中的首选矢量图形格式。所有现代浏览器,包括Chrome、Firefox、Safari、Opera和Edge,都对SVG提供了良好的原生支持。 **类工厂设计模式** 类工厂设计模式...

    经典svg教程

    特别是在需要高精度图形和响应式设计的地方,SVG因其灵活性和可伸缩性而成为首选。 【SVG的工具】 学习和开发SVG图形需要一些工具,如文本编辑器(用于编写SVG代码)、SVG查看器(用于预览和测试图形效果),以及...

    HighchartsJS是一个基于SVG的JavaScript图表库

    对于不支持VML或SVG的浏览器,它甚至可以借助canvas元素来绘制图表,确保了跨浏览器的兼容性。 3. **丰富的图表类型**:Highcharts JS提供了多种图表类型,包括折线图、柱状图、饼图、散点图、面积图、雷达图、热力...

    jQuery SVG垂直图标选项卡特效.zip

    在HTML5时代,SVG由于其可缩放性和清晰度,已经成为网页图形的首选格式,尤其在响应式设计中更是表现出色。 在这个特效中,SVG图标被用作各个选项卡的标识,当用户点击这些图标时,对应的选项卡内容会显示出来,而...

    基于Vxworks的嵌入式浏览器开发设计

    解析过程中,浏览器通常会采用递归下降解析器或词法分析器来识别标签、属性和内容。了解DOM(文档对象模型)和CSSOM(CSS对象模型)的构建过程也至关重要,因为它们决定了页面布局和样式。 在设计嵌入式浏览器时,...

    java基于BS结构下的OA流程可视化的研究与实现.zip

    Java作为一门面向对象的编程语言,具有跨平台、安全稳定等特性,是开发Web应用的首选之一。BS结构则是通过浏览器作为客户端,服务器端处理业务逻辑,使得用户无需安装特定软件即可访问系统,降低了维护成本,提高了...

    浏览器解析原理

    浏览器解析原理主要涉及浏览器内核的理解,以及它们如何处理网页内容。本文主要关注两种主流的浏览器内核:Trident(IE内核)和Gecko...同时,遵循Web标准,减少对特定浏览器内核的依赖,是创建跨平台兼容网页的关键。

    SVGView(供IE浏览器显示图形).rar

    在响应式设计中,SVG也是首选,因为它可以适应不同的屏幕尺寸。同时,SVG代码是文本格式,易于搜索、索引、压缩和编辑。 总的来说,这个压缩包提供的工具和资料对于那些需要在Internet Explorer上展示SVG内容的...

    基于java的BS结构下的OA流程可视化的研究与实现(源代码+论文)

    "Java"作为编程语言,是BS架构中常用的技术,它的跨平台特性使其成为企业级应用开发的首选。"软件/插件"暗示了这是一个独立的应用或可能与其他系统集成的组件。"OA流程可视化"是核心功能,它允许用户通过图形界面...

    Chart-Library:使用svg编写的动态图表

    SVG是一种基于XML的矢量图形格式,支持浏览器原生解析,因此可以在任何现代浏览器上提供高质量、清晰且可缩放的图形。 **SVG的优势** 1. **矢量图形**: SVG图像不会因放大而失真,这使得它们在不同分辨率和屏幕尺寸...

    PyPI 官网下载 | CairoSVG-2.5.2-py3-none-any.whl

    **PyPI 官网下载 | CairoSVG-2.5.2-py3-none-any.whl** 在Python开发中,PyPI(Python Package Index)是官方的第三方软件包仓库,为...其简单易用的API和跨平台的特性使其成为Python项目中处理SVG文件的首选库之一。

    在线VML画图工具flashvml2&2

    VML,全称Vector Markup Language,是一种用于...了解这些知识点后,开发者可以更好地利用在线VML工具,创建出适应旧版IE浏览器的高质量矢量图形内容,同时也能理解为何在新的Web开发中,SVG成为了首选的矢量图形技术。

    svgwin7-10.rar

    5. **跨平台兼容**:SVG是开放标准,支持所有主流浏览器和操作系统,包括移动设备。 "svgwin7-10.rar"这个压缩包包含的安装程序可能用于解决Windows系统默认不显示SVG文件缩略图的问题。在未安装此扩展之前,...

    应用实例icomoon生成字体图标

    通过这个平台,你可以从成千上万的矢量图标中挑选,或者上传自己的SVG图标,将其转换为可调整大小、颜色且跨浏览器兼容的字体图标。它的用户界面友好,操作流程简单,使得即使是对技术不太熟悉的设计师也能轻松上手...

    6种方法解决网页圆角边框

    SVG 是一种矢量图形格式,可以用来创建平滑的圆角边框,支持跨浏览器显示。通过 CSS 样式控制,可以实现灵活的定制。然而,对于老版本浏览器的兼容性需要额外的处理,比如使用内联 SVG 或者转换工具。 在选择实现...

    Open Doodles手绘风插画集、网页模板 .sketch .ai .svg素材下载

    .ai文件支持精确的形状构建、无限的缩放以及跨平台兼容性,是创作插画、徽标和排版等设计工作的首选工具。设计师可以使用Illustrator来打开和编辑这些手绘风格的插画。 3. .svg:SVG(Scalable Vector Graphics)是...

    一组矢量小怪兽形象图标 .svg素材下载

    SVG(Scalable Vector Graphics)格式是一种基于XML的矢量图像格式,它能够无损地缩放而不会损失清晰度,是设计师们的首选格式之一。标题和描述中的"一组矢量小怪兽形象图标 .svg素材下载",意味着我们有一个包含多...

    犀利的纯JS图形框架

    在现代浏览器中,它通常使用SVG,而在较旧的IE浏览器中则使用VML。 2. **丰富的图形元素**:Raphael.js提供了各种基本图形元素,如圆形、矩形、线、多边形、文本等,以及更复杂的路径和贝塞尔曲线,可以用来构建...

    logo-2015:2015年SVG中的个人徽标

    5. **良好的浏览器支持**:2015年时,大部分现代浏览器已经完全支持SVG,使得其成为网页设计的首选格式。 **JavaScript与SVG的结合** 在"logo-2015"项目中,JavaScript被用来操控SVG元素,实现动态效果。通过...

    蓝色商务插画 .eps .ai .svg 素材下载

    而.svg文件可以用Illustrator打开,也可以用代码编辑器或Web浏览器查看和修改。为了确保兼容性和质量,最好在下载前确认你的设备上已经安装了支持这些格式的软件。 总的来说,蓝色商务插画提供的矢量文件格式为设计...

Global site tag (gtag.js) - Google Analytics