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

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相关事件动画元素将透明度过渡到1或者可见属性变为visible来实现弹出图片效果。另一个是平移属性，它是先将图片移出到屏幕外，transform: translateX(10000), 然后还是同样的手段在点击之后将translateX值过渡0，只是动画元素只能CSS3的来实现一个平移过渡。

基于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.