SVG在电力调度自动化中的应用

发表时间:2021/8/9   来源:《中国电业》2021年第11期   作者:苏嘉梁
[导读] SVG图形格式与其他图形格式相比,
        苏嘉梁
        内蒙古巴彦淖尔电业局  内蒙古自治区 015100
        简要:SVG图形格式与其他图形格式相比,有着不可多得的优势。SVG图形格式 不仅能够实现对图形的无限缩放,还能在此条件下不影响图形的质量。本文,我们重点研究下SVG在电力调度自动化中的应用。
        关键词:SVG;电力调度自动化;应用
一 SVG概述
        SVG可以说是直接写出来的图形,而不是画出来,这就需要写很多代码,但是很多人不喜欢写代码,宁愿画图,所以SVG其实是有一定难度的。另外维护比较麻烦,不同浏览器的呈现效果也不一定相同,那么维护起来又涉及到改代码了,不如直接改图片方便。
        SVG优点是显而易见的,变大变小不会出现锯齿或模糊,一个SVG的logo可以在网站的任何地方以不同尺寸显示,本身文件也很小,节约资源。至于浏览器兼容性,只要你不是在为银行、老皇历的国企服务,基本上也不会有人会抱怨你的SVG显示不出来了。除了logo,SVG字体图标其实是一个更常用的点,font awesome是标配了吧,阿里的iconfont也是设计师最常用的工具了,现在交付设计稿,带一个iconfont的库也是很常见的,这里面的图标可都是SVG。不过实际使用中,注意不能用SVG作为背景图片。SVG的背景图片,你试试用background-size去设定尺寸,目前大多数浏览器里是无效的,这是一个小坑,相信不久应该会改善,目前记得不要用SVG背景图就是了。
        在兼容性方面,android 4.4 的浏览器以下支持部分API,基本的SVG在移动端的兼容性还是很不错的,但是像SVG滤镜、标签动画等这些功能目前在国内环境上还不是非常乐观,并且在有些浏览器上只支持通过matrix的方式来设置SVG的变换操作。除非你遇到了老式的webview,不然canvas你是可以玩的很开心的。总体来说,兼容性是很不错的了。
        在动画方面,SVG 其实和我们传统的dom动画类似,他支持类似css中的 transform、transition等等来实现动画,也可以通js获取SVG节点来改变 style属性来实现动画,总体来说还是和传统的dom实现动画思路较为一致。但是SVG并不适合用来做有大量物体元素运动的动画,它的优势是矢量形状和线条操作,类似这个demo。并且因为目前很多浏览器还没给SVG实现硬件加速(或者说不好实现),所以动画性能并不是非常好。
二 SVG在电力调度自动化中的应用
        基于SVG的电力图元描述。在电力调度自动化中,SVG主要承担的是图像编辑,主要应用场合是电力监控系统,监控室看到的图像是有一个个图片组合而成的,这些图片是由SVG编辑的。

SVG弹出图片的效果,其实有两种方式:一种通过SVG的动画效果去实现,另一种是借用微信自带的图片预览功能去实现。这里我们主要介绍SVG的实现方式:对于SVG的动画效果实现,主要是通过属性变化来实现,目前用的比较多的是透明度(opacity)、可见属性(visibility)、和平移(transform: translateX)这三种。其中透明度和可见比较好理解,就是将要弹出的图片放在指定的位置,通过opacity为0或者visibility为hidden来隐藏起来,然后在同样的位置放置一个能监听到点击事件;同样透明的rect(svg的矩形元素),当用户点击相应区域,从而触发点击,然后再通过begin属性设为click或者touch相关事件动画元素<animation/>将透明度过渡到1或者可见属性变为visible来实现弹出图片效果。另一个是平移属性,它是先将图片移出到屏幕外,transform: translateX(10000), 然后还是同样的手段在点击之后将translateX值过渡0,只是动画元素只能CSS3的<animateTransform/>来实现一个平移过渡。
        基于SVG的图形Web发布系统。发布方式有两种,一种是外联一种是内联,我们主要使用外联的方式。所谓外联是指通过SVG先将需要发布对象的属性记录在数据,再将数据传输到数据库中,最后通过数据库将对象的属性进行发布。数据库的一个表现形式是网站,SVG具有高分辨率和可移植的特点,于是在网站的logo及需要高分辨率的地方普遍会采用导出SVG这种图形解决方案。另外就是其自身的一种比较有自身特色的动画实现方式,即不需要借助js或者css来实现一些比较常用的动画效果,可以很好的嵌入到H5页面里,简洁高效,无副作用,所以在微信公众号文章里面会被广泛用于一些动效的实现。用于程序生成批量作业依赖图,支持分组,可拖拽搜索,右键复制与打开链接,全屏可缩放并带缩略图。使用Jtopo插件,去jq,支持IE;原理是使用HTML5的画布canvas 绘制的像素图 不能像 Graphviz(dot)、PlantUML、dagre-d3?那样生成SVG矢量图。第二个表现形式是即时报警,同其他的监控系统相比,SVG最大的优点是不会受到外界的干扰。常规的监控系统在受到外界的信号干扰之后,往往会输送一些命令或者干脆停止工作,SVG不会。无论外界的信号杂乱,基于SVG的监控系统可以利用预先编好的程序,能将命令准确的输送至报警装置上,进行报警操作。故在一些信号比较杂乱或对报警要求较高的的区域,需要使用SVG技术。
三 结语
        SVG在电力调度自动化中的应用确实推进了电力系统的发展,它不仅使电力系统与科学技术实现了接轨,也让电力系统的工作效率取得了很大的进步。除此之外,使用SVG还可以使电力调度自动化的信息获取速度提高,保障电力调度自动化的信息发送的准确性,进而保障电力系统的安全运行,使电力系统可以稳定高效的向我们供电。
参考文献
[1] 赵翔宇.基于SVG技术的电力系统可视化平台集成与方法库开发[J].电力系统自动化.2012.36(16):127—128.
[2] 冯朝力.SVG技术在电网调度自动化系统中的应用[J].电子世界.2014.O6(2O):123-124.
[3]刘海江.SVG技术在电力图形系统中的研究与实现[J].山东工业技术.2014.27(15):140一l41.
[4]郝建强.SVG在电力调度自动化中的应用[J].中国科技博览.2015.
投稿 打印文章 转寄朋友 留言编辑 收藏文章
  期刊推荐
1/1
转寄给朋友
朋友的昵称:
朋友的邮件地址:
您的昵称:
您的邮件地址:
邮件主题:
推荐理由:

写信给编辑
标题:
内容:
您的昵称:
您的邮件地址: