简介面向电力行业绘图与软件开发人员的SVG电力图元定义文档统一了电力接线图中隔离开关、断路器、变压器等常见设备符号的绘制标准。SVG作为基于XML的矢量格式可无损缩放非常适合在不同尺寸屏幕与打印材料上保持图形清晰一致。文档以XML语法描述每个Symbol ID对应的图形几何结构详细给出竖直/水平、刀上/刀下、分/合等不同状态下的隔离开关图符定义如Dis_V_D_OPen、Dis_V_D_Close等并展示了通过旋转、镜像等几何变换扩展图元方向的方法既保证坐标精确也避免重复绘制。全部定义可直接用于支持SVG解析的C、Java或各类绘图软件中。资源为单个doc格式文档压缩包整体约5.2MB内容包含典型图符定义章节与大量可复制的SVG代码示例。已有2966人学习下载适合从事电力系统单线图设计、自动化绘图工具开发或二次开发的工程师参考使用能有效提升图元标准化与跨平台复用效率。1. 从一张会失真的接线图说起SVG 电力图元为什么值得自己做某次给一个老旧的站内监控画面做大屏改造原图是从CAD里导出的位图铺到55寸大屏上之后断路器符号边缘全是锯齿开关的分合状态只能靠叠色块想做个闪烁效果更是折腾。后来我把整套图符换成了SVG格式定义的电力图元也就是用SVG编写的一套电力图符同样的图在任意分辨率下线条都清晰状态切换从“换图片”变成“切class”连线端子的坐标也能直接从DOM里读了。这篇就讲清楚这套方案的选型、坐标规范、手写图元、接入实时数据以及那些不踩一遍你根本想不到的坑。适合做电力监控、组态界面、SCADA画面的开发者或前端工程师参考。2. 为什么选 SVG 而不是位图或 Canvas图元的坐标与结构规范先说清楚这里讨论的“电力图元”不是拿绘图软件画一张装饰图而是指能放进接线图、能被程序识别和驱动的电气符号。电力图元在系统里要能接收遥信状态、能被组态工具拖拽连线、能按编号检索。所以选型的第一标准不是“好不好看”而是“能不能被程序结构化地操作”。2.1 位图、Canvas、SVG 三者选型的真实差异位图图元在老系统里很常见PNG格式加载快、做起来省事但问题集中爆发在大屏和触控屏时代。放大到高分辨率后边缘发虚想让设备状态变颜色只能准备多张图片故障闪烁还得做帧序列替换维护成本随着图元数量线性上升。连接点坐标要和图片位置绑定维护一份表图片一更新表就得重做。位图本质上把“展示”和“数据”焊死了扩展性非常差。Canvas图元比位图灵活画出来之后任意缩放都不怕但它的问题是“画完就忘”的模型。设备、端子、标签在Canvas里只是一堆绘制命令没有结构化元素点击命中要自己算包围盒状态切换要把画布重绘一遍多个图元联动还得手动管理绘制顺序。如果只是做一个实时趋势图Canvas很合适但做带编辑能力的接线图这些成本会越滚越大。SVG把图元定义成可查询、可修改的结构化XML设备是真实的g、rect、line、circle节点DOM可以访问属性可以修改。改状态就是改class连线直接读端子坐标闪烁用CSS动画解决不需要重绘画布。对电力图元这种“数量大、状态多、要交互”的场景SVG的开发效率和可维护性明显优于另外两种方案。我经历过的项目凡是坚持做到第二期还在持续改图的最后都回到了SVG。注意并不是说Canvas一无是处。如果图元数量超过几千并且不允许DOM介入Canvas的高性能路径仍然有优势。但对“组态编辑实时状态”这个典型需求SVG是综合成本最低的。2.2 给电力图元定一套坐标基准viewBox、端子和留白图元要能统一摆放、旋转、镜像前提是坐标基准一致。我一般给每个图元定一个48×48的viewBox设备中心放在(24,24)水平主轴线在y24左右端子固定放在x0和x48、y24的位置。为什么不把viewBox设成100×100或者别的尺寸因为48这个数字对图元来说刚好够用设备本体占中间20到30个用户单位左右留出引出线的空间下方预留编号文字区整张画布不会有视觉拥挤。所有图元统一viewBox还有一个关键价值就是放到同一张画布时缩放比例完全一致连线点能直接对齐。绘制顺序也建议固定下来先画左右引出线再画设备本体然后画端子小圆点最后在画布下方放设备编号文字。端子圆点半径建议等于2个用户单位填充用背景色、描边用设备线色这样组态工具能精准吸附连线平时看着也像一个明确的连接点。这块在行业里没有统一硬性标准但一套内部约定能省掉后面绝大部分麻烦。我之前接手过一个从CAD直接转SVG的图元库每个图元的viewBox宽高比都不一样原点有的在左上、有的在中心接入组态工具后旋转操作全线出错最后只能批量重画。坐标规范这件事宁可开始多花半天定清楚也不要等图元跑到一百个再回头补。2.3 颜色、线型与状态命名的行业惯例图元的静态样式建议统一做成公共CSS而不是在每个SVG里写死颜色。电气图里常用的区分方式母线用粗实线主设备用中粗线控制信号线用细线。颜色方面很多老图纸习惯正常态用白底深框故障态用红色或橙色检修态用灰色。这里具体色值不同项目差别很大但状态分类是通用的。电力设备运行状态我建议预定义四档状态类名视觉特征典型场景device-state-normal正常色白底或浅绿底设备运行、分合闸状态正常device-state-alarm橙色或黄色底越限、保护启动等告警device-state-fault浅红底加闪烁事故跳闸、故障动作device-state-offline降低透明度并置灰检修、通信中断、退出运行类名统一之后后面接实时数据库时就是一套映射表的事脚本里不会出现“把某台断路器的fill改成#f00”这种硬编码。线型上交流线用实线、保护接地用虚线这个按项目历史图纸的约定来不需要在代码层面刻意区分只要保证CSS类定义好就行。3. 手写第一组可复用的 SVG 电力图元断路器、隔离开关、接地与变压器这章直接给可复现的代码。我以一次接线图里最常用的四类图元为例断路器、隔离开关、接地、变压器。每个图元都按第2章的坐标规范来viewBox统一是0 0 48 48主轴线在y24端子分别在x0和x48。3.1 断路器图元结构分解与最小可运行代码先看完整的断路器图元。把它保存成一个独立的SVG文件浏览器打开就能看到效果。svg xmlnshttp://www.w3.org/2000/svg viewBox0 0 48 48 width96 height96 !-- 左右引出线作为电气连接边界 -- line x10 y124 x215 y224 classwire/ line x133 y124 x248 y224 classwire/ !-- 断路器本体矩形 交叉斜线表示灭弧室符号 -- rect x15 y13 width18 height22 classdevice-body/ line x117 y115 x231 y233 classdevice-symbol/ line x131 y115 x217 y233 classdevice-symbol/ !-- 左右端子点供组态连线吸附 -- circle cx15 cy24 r2 classterminal/ circle cx33 cy24 r2 classterminal/ !-- 设备编号默认文本可在组态时替换 -- text x24 y43 text-anchormiddle classid-labelQF01/text /svg几个参数需要说明。rect的x15、y13、width18、height22把矩形放在画布水平居中位置15加18的一半等于24正好落在画布中心垂直范围是y13到y35给下方y43的编号文字留出足够间隙。引出线从x0到x15、x33到x48中间15到33这段宽度正好被矩形占满两端没有多余空隙。端子圆点cx15和cx33贴在矩形两侧组态连线时能精确捕获。交叉斜线我选用17,15到31,33以及31,15到17,33也就是从矩形内边界四个角各向内偏移2个用户单位起笔避免斜线端点戳穿边框视觉上更干净。样式类名全部走外部CSSSVG里不出现fill和stroke。你把这段SVG插入页面后加上一条.device-body { fill: #fff; stroke: #2d3a4a; }就能显示成白底深框的断路器符号。3.2 隔离开关、接地与变压器图元模板隔离开关和断路器的视觉差异在于隔离开关有明显的断开缺口加闸刀斜线体现其不能带负荷分闸的结构语义。svg xmlnshttp://www.w3.org/2000/svg viewBox0 0 48 48 line x10 y124 x217 y224 classwire/ line x131 y124 x248 y224 classwire/ !-- 隔离开关闸刀缺口 斜线 -- line x117 y124 x231 y224 classdevice-symbol/ line x121 y124 x229 y231 classdevice-symbol/ circle cx17 cy24 r2 classterminal/ circle cx31 cy24 r2 classterminal/ text x24 y43 text-anchormiddle classid-labelQS01/text /svg这里水平线x117、x231代表闸刀两端斜线从(21,24)到(29,31)代表刀口可动部分。注意斜线起点没有放在17的位置而是向内收了4个单位为了让断开缺口更明显更贴近常规电气图符的辨识习惯。如果你们项目图例要求斜线从端点开始把x1改成17即可不影响端子坐标。接地图元的要点是竖线加三根递减横线横线间距相等且中线对齐。svg xmlnshttp://www.w3.org/2000/svg viewBox0 0 48 48 !-- 接地竖向引下线 -- line x124 y18 x224 y218 classwire/ !-- 三根递减横线中线在x24 -- line x112 y118 x236 y218 classwire/ line x116 y126 x232 y226 classwire/ line x120 y134 x228 y234 classwire/ circle cx24 cy8 r2 classterminal/ text x24 y44 text-anchormiddle classid-labelPE01/text /svg接地图元只有一个端子放在顶部x24、y8的位置便于从母线或设备外壳引一条竖线下来直接接入。三根横线长度依次是24、16、8个用户单位递减量保持一致视觉上就是标准接地图符。如果项目图纸要求斜收口风格可以把横线换成斜线但中线x24必须保持否则图元旋转时会偏离设备中心。变压器图元用两个圆表示双绕组中间留出铁芯气隙。svg xmlnshttp://www.w3.org/2000/svg viewBox0 0 48 48 line x10 y124 x213 y224 classwire/ line x135 y124 x248 y224 classwire/ !-- 高低压绕组两个等直径圆 -- circle cx17 cy24 r9 classdevice-body/ circle cx31 cy24 r9 classdevice-body/ circle cx13 cy24 r2 classterminal/ circle cx35 cy24 r2 classterminal/ text x24 y44 text-anchormiddle classid-labelT01/text /svg绕组圆半径9圆心x17和x31两圆间距等于4个用户单位这个间隙在图上体现为铁芯气隙。两圆外边缘在x8和x40端子x13和x35正好落在圆与引出线的交界处连线点对齐圆心水平线组态拖线不会歪。3.3 把图元组织成库symbol 注册与 use 引用的边界图元数量达到几十个之后继续在每个页面里重复粘贴SVG就不行了。我一般维护一个JS模块把图元定义为模板字符串用函数生成实例。const SYMBOLS { breaker: g classsym-breaker line x10 y124 x215 y224 classwire/ line x133 y124 x248 y224 classwire/ rect x15 y13 width18 height22 classdevice-body/ line x117 y115 x231 y233 classdevice-symbol/ line x131 y115 x217 y233 classdevice-symbol/ circle cx15 cy24 r2 classterminal/ circle cx33 cy24 r2 classterminal/ text x24 y43 text-anchormiddle classid-label/text /g }; function createDevice(type, id, tag) { const wrap document.createElementNS(http://www.w3.org/2000/svg, g); wrap.setAttribute(data-device-type, type); wrap.setAttribute(data-tag, tag); wrap.innerHTML SYMBOLS[type]; const label wrap.querySelector(.id-label); if (label) label.textContent id; return wrap; }把图元定义成模板字符串的好处是设备编号、data-tag可以在插入时动态设置不用清理SVG里的残留文本每个图元实例是独立DOM子树后续做状态切换改的就是这个g上的class。这里不推荐把图元注册成symbol再大量用use引用原因有两条一是use实例的样式隔离问题多运行时给单个实例着色经常失效二是use引用的图元无法单独替换文本编号还得额外包一层text覆盖绕远路。静态图标用symbol没毛病动态电力图元建议直接生成DOM实例。4. 把图元接进实时数据状态切换、闪烁与连线端子图元画出来只是第一步。电力系统里图元必须跟着遥信变位走断路器跳闸要变红、保护动作要闪烁、设备检修要变灰。这章讲怎么用class切换做动态化而不是重绘SVG。4.1 静态图元到动态图元id、class 与 data 属性约定图元动态化有两个关键一是怎么把图元和监控数据库的测点对上二是怎么把设备状态映射成视觉状态。我的约定是每个图元实例是一个g节点节点上带data-tag属性值等于监控系统里的遥信点名节点class由设备类型和运行状态两部分组成。g classdevice-breaker device-state-normal >const stateMap { 0: device-state-normal, 1: device-state-fault, 2: device-state-alarm, 3: device-state-offline }; async function pollSwitchStates() { let resp; try { resp await fetch(/api/telemetry/positions, { cache: no-store }); } catch (err) { // 网络失败保留上次状态不要清空全屏 return; } if (!resp.ok) return; const items await resp.json(); for (const item of items) { const node document.querySelector([data-tag${item.tag}]); if (!node) continue; const next stateMap[item.value] || device-state-normal; if (node.getAttribute(class) ! next) { node.setAttribute(class, node.dataset.deviceType next); } } } setInterval(pollSwitchStates, 3000);轮询间隔3秒覆盖绝大多数变位刷新场景如果现场要求秒级刷新可以改成1秒但要注意大屏下几百个图元的class替换频率实测中1秒不会卡。再密集就要考虑改成WebSocket主动推送而不是继续轮询。stateMap的0到3映射到四档状态具体哪个数值对应哪个状态要跟后台的遥信规约对齐我见过项目把0和1的定义搞反合闸显示成故障排查了半天。闪烁用CSS动画实现不需要JS定时器.device-state-fault .device-body, .device-state-fault .device-symbol { animation: blink-red 1s step-end infinite; } keyframes blink-red { 0%, 100% { fill: #ffdddd; stroke: #d02020; } 50% { fill: #ffffff; stroke: #d02020; } }这里用step-end而不是linear因为故障闪烁是开关量要么亮要么灭step-end让颜色在两个状态间硬切换更贴近传统微机五防画面的闪烁手感。animation时长1秒是比较通用的默认值现场觉得刺眼就调到1.5秒。注意动画只加在device-body和device-symbol上不要加在wire上否则左右引出线跟着闪整个画面会很乱。4.3 端子坐标约定与组态连线的最小方案图元动态化之后还要能和其他图元连线。组态工具里常见的做法是图元实例内保留两个端子类名连线端点实时读取端子坐标。function getTerminalPoints(deviceNode) { const terminals deviceNode.querySelectorAll(.terminal); return Array.from(terminals).map(t { const pt deviceNode.ownerSVGElement.createSVGPoint(); pt.x t.getAttribute(cx); pt.y t.getAttribute(cy); return pt.matrixTransform(deviceNode.getCTM()); }); }这段逻辑的核心在于端子圆的cx、cy是图元本地坐标。如果图元所在分组有translate或rotate直接拿cx、cy会画错位置所以用getCTM把本地坐标变换到画布当前用户坐标再交给连线使用。多数组态场景下图元只做平移、不旋转但一旦做旋转这里就能拦住错误。连线的数据模型我建议存两个端点引用的设备tag加端子序号而不是存坐标。因为设备一旦移动坐标就失效存引用关系设备移动后重建连线时重新取坐标即可。这个习惯能让组态工具少掉大量重算逻辑也是图和数据分离的基础。5. 避坑SVG 电力图元最容易翻车的 5 个细节这一章写踩坑经验。前四章讲怎么做对这一章讲哪里会做错。5.1 视图坐标越画越偏viewBox 与用户单位混用的坑现象图元插入页面后有的偏左上、有的居中同一个图元在普通屏上正常接入组态工具后却被裁剪掉一半。原因图元内部统一定了viewBox但外部容器或父级g又套了不同的viewBox或者transform多个坐标系叠加导致本地坐标被二次解释。另一个常见原因是混用用户单位和像素有人把viewBox设成0 0 48 48又用width48px直接指定显示尺寸一旦父级缩放比例不是1比1内部线条就偏离预期。解决所有图元只依赖viewBoxwidth和height交给外部统一缩放父级画布只维护一个全局viewBox不要给每个设备再套带viewBox的独立svg设备统一用g承载。我习惯在插入图元后做一次自检查询getBoundingClientRect确认设备中心落在预期位置偏差超过一个像素就检查父级transform。5.2 放大后线条粗细失控non-scaling-stroke 与像素对齐现象图元缩到50%时1px的线变成半透明细线放大到200%时线粗得像是拿记号笔画上去的。原因stroke-width默认受viewBox缩放影响。viewBox是0 0 48 48显示尺寸越大用户单位放得越大线条跟着等比放大。小屏上0.5px的线在低DPI屏幕渲染不出来高DPI屏幕上又粗细不一。解决给所有结构线加vector-effectnon-scaling-stroke让笔宽始终等于像素值。加完之后图元缩小不会糊放大也不会突兀。如果不希望所有线都这样只给wire加也行但device-body的边框如果不同步会比较难看。笔宽建议统一1.5px粗线比如母线用单独class控制到3px。5.3 状态颜色死活不生效内联样式与 CSS 优先级现象脚本把class切成device-state-fault设备颜色纹丝不动打开控制台看到class和样式都定义对了就是不显示。原因SVG内部某个元素写了fill#fff内联样式内联样式优先级高于外部CSS的class规则后者覆盖不了。从CAD或绘图工具导出的SVG尤其常见工具会把每个元素的fill和stroke都写死。解决执行零内联样式约定图元模板里不允许出现fill、stroke、opacity这些样式属性全部用class。历史遗留图元用批量脚本清理遍历元素把fill和stroke属性删掉保留结构。删完再测一遍状态切换。我改造老图时被这个坑折腾过两次第一次以为是浏览器缓存后来发现某条line上写着一行fill#000。5.4 use 实例各染各色失败symbol 复用的样式隔离问题现象把断路器做成symbol idsym-brk页面上放四个use想让其中一个变红结果四个一起变红或者一个都变不了。原因use引用的是克隆子树外部CSS能作用到use元素本身但不一定能按预期穿透到克隆后的内部元素。即便有些浏览器支持部分穿透规则也随元素层级变化而不同。当你要让同一符号的不同实例有不同状态色时use的模型基本是最差选择。解决动态电力图元不走use走模板字符串加DOM克隆也就是3.3节的createDevice函数路径。每个实例都是真实DOM子树实例间样式天然隔离。use只留给纯静态且不区分状态的图元比如母线编号框、设备铭牌框。5.5 旋转后图元跑位SVG 旋转中心与 transform-box现象把隔离开关图元转90度结果它没有原地旋转而是画着大圆弧飞到了画布右下角。原因SVG的transformrotate(90)默认绕坐标系原点(0,0)旋转而图元中心在(24,24)。坐标系原点在图元之外旋转自然就平移到远处。如果图元直接挂在画布根节点下绕(0,0)旋转就是绕画布左上角。解决旋转时显式指定中心点写成transformrotate(90 24 24)或者在CSS里写transform-origin: center; transform-box: fill-box;让旋转中心跟随图元自身包围盒。这里注意transform-box属性的兼容性老一些的嵌入式WebView不支持要兼容工控屏的话最稳的还是把中心坐标写进transform参数。6. 进阶把图元沉淀为组件库的验证习惯图元多了之后最大的风险不是画不出来而是改一个公共CSS牵动全部图元导致某个符号悄悄变形。我给自己定了个习惯每个图元库必须配一张视觉回归页把所有图元平铺渲染同时展示四种状态。6.1 组件化注册与主题替换的最小结构公共样式用CSS变量管理主题切换只改变量不碰每个图元的模板:root { --color-wire: #2d3a4a; --color-body: #ffffff; --color-fault: #e02020; --color-alarm: #ff8c00; --color-offline: #b0b0b0; } .device-body { fill: var(--color-body); stroke: var(--color-wire); } .device-state-fault .device-body { fill: #ffdddd; stroke: var(--color-fault); }图元模板里不允许直接用色值只写class换肤就是换CSS变量那块。机房夜间模式、大屏高对比模式都能靠这个撑住。6.2 一张视觉回归页验证全部图元我通常会把断路器、隔离开关、接地、变压器各放一行每行同时渲染正常、告警、故障、检修四个状态然后用固定分辨率截图对比。const cases [ { type: breaker, label: 断路器 }, { type: ground, label: 接地 }, { type: transformer, label: 变压器 } ]; const states [normal, alarm, fault, offline]; cases.forEach(c { states.forEach(s { const g createDevice(c.type, c.label - s, test-${c.type}-${s}); g.setAttribute(class, device-${c.type} device-state-${s}); document.getElementById(regression-grid).appendChild(g); }); });改一次公共样式截图一次看四行样本没有异常才敢提交。这条习惯帮我拦下过至少两次“改完全部断路器都变绿”的翻车。另外验证不能只看静态截图还要手动触发一次状态切换确认normal到fault的闪烁动画和颜色都正常。最后说个教训以前我在某个模拟项目里图元尺寸写了固定像素没走viewBox结果从普通屏搬到55寸触控大屏时整个接线图错位熬夜重画了一整版。从那以后所有图元一律以viewBox为唯一真实坐标显示尺寸只由外部缩放决定。这套方案按上面的做法搭一遍两天内就能在你的项目里跑起来。希望帮到你。本文还有配套的精品资源点击获取
简介面向电力行业绘图与软件开发人员的SVG电力图元定义文档统一了电力接线图中隔离开关、断路器、变压器等常见设备符号的绘制标准。SVG作为基于XML的矢量格式可无损缩放非常适合在不同尺寸屏幕与打印材料上保持图形清晰一致。文档以XML语法描述每个Symbol ID对应的图形几何结构详细给出竖直/水平、刀上/刀下、分/合等不同状态下的隔离开关图符定义如Dis_V_D_OPen、Dis_V_D_Close等并展示了通过旋转、镜像等几何变换扩展图元方向的方法既保证坐标精确也避免重复绘制。全部定义可直接用于支持SVG解析的C、Java或各类绘图软件中。资源为单个doc格式文档压缩包整体约5.2MB内容包含典型图符定义章节与大量可复制的SVG代码示例。已有2966人学习下载适合从事电力系统单线图设计、自动化绘图工具开发或二次开发的工程师参考使用能有效提升图元标准化与跨平台复用效率。1. 从一张会失真的接线图说起SVG 电力图元为什么值得自己做某次给一个老旧的站内监控画面做大屏改造原图是从CAD里导出的位图铺到55寸大屏上之后断路器符号边缘全是锯齿开关的分合状态只能靠叠色块想做个闪烁效果更是折腾。后来我把整套图符换成了SVG格式定义的电力图元也就是用SVG编写的一套电力图符同样的图在任意分辨率下线条都清晰状态切换从“换图片”变成“切class”连线端子的坐标也能直接从DOM里读了。这篇就讲清楚这套方案的选型、坐标规范、手写图元、接入实时数据以及那些不踩一遍你根本想不到的坑。适合做电力监控、组态界面、SCADA画面的开发者或前端工程师参考。2. 为什么选 SVG 而不是位图或 Canvas图元的坐标与结构规范先说清楚这里讨论的“电力图元”不是拿绘图软件画一张装饰图而是指能放进接线图、能被程序识别和驱动的电气符号。电力图元在系统里要能接收遥信状态、能被组态工具拖拽连线、能按编号检索。所以选型的第一标准不是“好不好看”而是“能不能被程序结构化地操作”。2.1 位图、Canvas、SVG 三者选型的真实差异位图图元在老系统里很常见PNG格式加载快、做起来省事但问题集中爆发在大屏和触控屏时代。放大到高分辨率后边缘发虚想让设备状态变颜色只能准备多张图片故障闪烁还得做帧序列替换维护成本随着图元数量线性上升。连接点坐标要和图片位置绑定维护一份表图片一更新表就得重做。位图本质上把“展示”和“数据”焊死了扩展性非常差。Canvas图元比位图灵活画出来之后任意缩放都不怕但它的问题是“画完就忘”的模型。设备、端子、标签在Canvas里只是一堆绘制命令没有结构化元素点击命中要自己算包围盒状态切换要把画布重绘一遍多个图元联动还得手动管理绘制顺序。如果只是做一个实时趋势图Canvas很合适但做带编辑能力的接线图这些成本会越滚越大。SVG把图元定义成可查询、可修改的结构化XML设备是真实的g、rect、line、circle节点DOM可以访问属性可以修改。改状态就是改class连线直接读端子坐标闪烁用CSS动画解决不需要重绘画布。对电力图元这种“数量大、状态多、要交互”的场景SVG的开发效率和可维护性明显优于另外两种方案。我经历过的项目凡是坚持做到第二期还在持续改图的最后都回到了SVG。注意并不是说Canvas一无是处。如果图元数量超过几千并且不允许DOM介入Canvas的高性能路径仍然有优势。但对“组态编辑实时状态”这个典型需求SVG是综合成本最低的。2.2 给电力图元定一套坐标基准viewBox、端子和留白图元要能统一摆放、旋转、镜像前提是坐标基准一致。我一般给每个图元定一个48×48的viewBox设备中心放在(24,24)水平主轴线在y24左右端子固定放在x0和x48、y24的位置。为什么不把viewBox设成100×100或者别的尺寸因为48这个数字对图元来说刚好够用设备本体占中间20到30个用户单位左右留出引出线的空间下方预留编号文字区整张画布不会有视觉拥挤。所有图元统一viewBox还有一个关键价值就是放到同一张画布时缩放比例完全一致连线点能直接对齐。绘制顺序也建议固定下来先画左右引出线再画设备本体然后画端子小圆点最后在画布下方放设备编号文字。端子圆点半径建议等于2个用户单位填充用背景色、描边用设备线色这样组态工具能精准吸附连线平时看着也像一个明确的连接点。这块在行业里没有统一硬性标准但一套内部约定能省掉后面绝大部分麻烦。我之前接手过一个从CAD直接转SVG的图元库每个图元的viewBox宽高比都不一样原点有的在左上、有的在中心接入组态工具后旋转操作全线出错最后只能批量重画。坐标规范这件事宁可开始多花半天定清楚也不要等图元跑到一百个再回头补。2.3 颜色、线型与状态命名的行业惯例图元的静态样式建议统一做成公共CSS而不是在每个SVG里写死颜色。电气图里常用的区分方式母线用粗实线主设备用中粗线控制信号线用细线。颜色方面很多老图纸习惯正常态用白底深框故障态用红色或橙色检修态用灰色。这里具体色值不同项目差别很大但状态分类是通用的。电力设备运行状态我建议预定义四档状态类名视觉特征典型场景device-state-normal正常色白底或浅绿底设备运行、分合闸状态正常device-state-alarm橙色或黄色底越限、保护启动等告警device-state-fault浅红底加闪烁事故跳闸、故障动作device-state-offline降低透明度并置灰检修、通信中断、退出运行类名统一之后后面接实时数据库时就是一套映射表的事脚本里不会出现“把某台断路器的fill改成#f00”这种硬编码。线型上交流线用实线、保护接地用虚线这个按项目历史图纸的约定来不需要在代码层面刻意区分只要保证CSS类定义好就行。3. 手写第一组可复用的 SVG 电力图元断路器、隔离开关、接地与变压器这章直接给可复现的代码。我以一次接线图里最常用的四类图元为例断路器、隔离开关、接地、变压器。每个图元都按第2章的坐标规范来viewBox统一是0 0 48 48主轴线在y24端子分别在x0和x48。3.1 断路器图元结构分解与最小可运行代码先看完整的断路器图元。把它保存成一个独立的SVG文件浏览器打开就能看到效果。svg xmlnshttp://www.w3.org/2000/svg viewBox0 0 48 48 width96 height96 !-- 左右引出线作为电气连接边界 -- line x10 y124 x215 y224 classwire/ line x133 y124 x248 y224 classwire/ !-- 断路器本体矩形 交叉斜线表示灭弧室符号 -- rect x15 y13 width18 height22 classdevice-body/ line x117 y115 x231 y233 classdevice-symbol/ line x131 y115 x217 y233 classdevice-symbol/ !-- 左右端子点供组态连线吸附 -- circle cx15 cy24 r2 classterminal/ circle cx33 cy24 r2 classterminal/ !-- 设备编号默认文本可在组态时替换 -- text x24 y43 text-anchormiddle classid-labelQF01/text /svg几个参数需要说明。rect的x15、y13、width18、height22把矩形放在画布水平居中位置15加18的一半等于24正好落在画布中心垂直范围是y13到y35给下方y43的编号文字留出足够间隙。引出线从x0到x15、x33到x48中间15到33这段宽度正好被矩形占满两端没有多余空隙。端子圆点cx15和cx33贴在矩形两侧组态连线时能精确捕获。交叉斜线我选用17,15到31,33以及31,15到17,33也就是从矩形内边界四个角各向内偏移2个用户单位起笔避免斜线端点戳穿边框视觉上更干净。样式类名全部走外部CSSSVG里不出现fill和stroke。你把这段SVG插入页面后加上一条.device-body { fill: #fff; stroke: #2d3a4a; }就能显示成白底深框的断路器符号。3.2 隔离开关、接地与变压器图元模板隔离开关和断路器的视觉差异在于隔离开关有明显的断开缺口加闸刀斜线体现其不能带负荷分闸的结构语义。svg xmlnshttp://www.w3.org/2000/svg viewBox0 0 48 48 line x10 y124 x217 y224 classwire/ line x131 y124 x248 y224 classwire/ !-- 隔离开关闸刀缺口 斜线 -- line x117 y124 x231 y224 classdevice-symbol/ line x121 y124 x229 y231 classdevice-symbol/ circle cx17 cy24 r2 classterminal/ circle cx31 cy24 r2 classterminal/ text x24 y43 text-anchormiddle classid-labelQS01/text /svg这里水平线x117、x231代表闸刀两端斜线从(21,24)到(29,31)代表刀口可动部分。注意斜线起点没有放在17的位置而是向内收了4个单位为了让断开缺口更明显更贴近常规电气图符的辨识习惯。如果你们项目图例要求斜线从端点开始把x1改成17即可不影响端子坐标。接地图元的要点是竖线加三根递减横线横线间距相等且中线对齐。svg xmlnshttp://www.w3.org/2000/svg viewBox0 0 48 48 !-- 接地竖向引下线 -- line x124 y18 x224 y218 classwire/ !-- 三根递减横线中线在x24 -- line x112 y118 x236 y218 classwire/ line x116 y126 x232 y226 classwire/ line x120 y134 x228 y234 classwire/ circle cx24 cy8 r2 classterminal/ text x24 y44 text-anchormiddle classid-labelPE01/text /svg接地图元只有一个端子放在顶部x24、y8的位置便于从母线或设备外壳引一条竖线下来直接接入。三根横线长度依次是24、16、8个用户单位递减量保持一致视觉上就是标准接地图符。如果项目图纸要求斜收口风格可以把横线换成斜线但中线x24必须保持否则图元旋转时会偏离设备中心。变压器图元用两个圆表示双绕组中间留出铁芯气隙。svg xmlnshttp://www.w3.org/2000/svg viewBox0 0 48 48 line x10 y124 x213 y224 classwire/ line x135 y124 x248 y224 classwire/ !-- 高低压绕组两个等直径圆 -- circle cx17 cy24 r9 classdevice-body/ circle cx31 cy24 r9 classdevice-body/ circle cx13 cy24 r2 classterminal/ circle cx35 cy24 r2 classterminal/ text x24 y44 text-anchormiddle classid-labelT01/text /svg绕组圆半径9圆心x17和x31两圆间距等于4个用户单位这个间隙在图上体现为铁芯气隙。两圆外边缘在x8和x40端子x13和x35正好落在圆与引出线的交界处连线点对齐圆心水平线组态拖线不会歪。3.3 把图元组织成库symbol 注册与 use 引用的边界图元数量达到几十个之后继续在每个页面里重复粘贴SVG就不行了。我一般维护一个JS模块把图元定义为模板字符串用函数生成实例。const SYMBOLS { breaker: g classsym-breaker line x10 y124 x215 y224 classwire/ line x133 y124 x248 y224 classwire/ rect x15 y13 width18 height22 classdevice-body/ line x117 y115 x231 y233 classdevice-symbol/ line x131 y115 x217 y233 classdevice-symbol/ circle cx15 cy24 r2 classterminal/ circle cx33 cy24 r2 classterminal/ text x24 y43 text-anchormiddle classid-label/text /g }; function createDevice(type, id, tag) { const wrap document.createElementNS(http://www.w3.org/2000/svg, g); wrap.setAttribute(data-device-type, type); wrap.setAttribute(data-tag, tag); wrap.innerHTML SYMBOLS[type]; const label wrap.querySelector(.id-label); if (label) label.textContent id; return wrap; }把图元定义成模板字符串的好处是设备编号、data-tag可以在插入时动态设置不用清理SVG里的残留文本每个图元实例是独立DOM子树后续做状态切换改的就是这个g上的class。这里不推荐把图元注册成symbol再大量用use引用原因有两条一是use实例的样式隔离问题多运行时给单个实例着色经常失效二是use引用的图元无法单独替换文本编号还得额外包一层text覆盖绕远路。静态图标用symbol没毛病动态电力图元建议直接生成DOM实例。4. 把图元接进实时数据状态切换、闪烁与连线端子图元画出来只是第一步。电力系统里图元必须跟着遥信变位走断路器跳闸要变红、保护动作要闪烁、设备检修要变灰。这章讲怎么用class切换做动态化而不是重绘SVG。4.1 静态图元到动态图元id、class 与 data 属性约定图元动态化有两个关键一是怎么把图元和监控数据库的测点对上二是怎么把设备状态映射成视觉状态。我的约定是每个图元实例是一个g节点节点上带data-tag属性值等于监控系统里的遥信点名节点class由设备类型和运行状态两部分组成。g classdevice-breaker device-state-normal >const stateMap { 0: device-state-normal, 1: device-state-fault, 2: device-state-alarm, 3: device-state-offline }; async function pollSwitchStates() { let resp; try { resp await fetch(/api/telemetry/positions, { cache: no-store }); } catch (err) { // 网络失败保留上次状态不要清空全屏 return; } if (!resp.ok) return; const items await resp.json(); for (const item of items) { const node document.querySelector([data-tag${item.tag}]); if (!node) continue; const next stateMap[item.value] || device-state-normal; if (node.getAttribute(class) ! next) { node.setAttribute(class, node.dataset.deviceType next); } } } setInterval(pollSwitchStates, 3000);轮询间隔3秒覆盖绝大多数变位刷新场景如果现场要求秒级刷新可以改成1秒但要注意大屏下几百个图元的class替换频率实测中1秒不会卡。再密集就要考虑改成WebSocket主动推送而不是继续轮询。stateMap的0到3映射到四档状态具体哪个数值对应哪个状态要跟后台的遥信规约对齐我见过项目把0和1的定义搞反合闸显示成故障排查了半天。闪烁用CSS动画实现不需要JS定时器.device-state-fault .device-body, .device-state-fault .device-symbol { animation: blink-red 1s step-end infinite; } keyframes blink-red { 0%, 100% { fill: #ffdddd; stroke: #d02020; } 50% { fill: #ffffff; stroke: #d02020; } }这里用step-end而不是linear因为故障闪烁是开关量要么亮要么灭step-end让颜色在两个状态间硬切换更贴近传统微机五防画面的闪烁手感。animation时长1秒是比较通用的默认值现场觉得刺眼就调到1.5秒。注意动画只加在device-body和device-symbol上不要加在wire上否则左右引出线跟着闪整个画面会很乱。4.3 端子坐标约定与组态连线的最小方案图元动态化之后还要能和其他图元连线。组态工具里常见的做法是图元实例内保留两个端子类名连线端点实时读取端子坐标。function getTerminalPoints(deviceNode) { const terminals deviceNode.querySelectorAll(.terminal); return Array.from(terminals).map(t { const pt deviceNode.ownerSVGElement.createSVGPoint(); pt.x t.getAttribute(cx); pt.y t.getAttribute(cy); return pt.matrixTransform(deviceNode.getCTM()); }); }这段逻辑的核心在于端子圆的cx、cy是图元本地坐标。如果图元所在分组有translate或rotate直接拿cx、cy会画错位置所以用getCTM把本地坐标变换到画布当前用户坐标再交给连线使用。多数组态场景下图元只做平移、不旋转但一旦做旋转这里就能拦住错误。连线的数据模型我建议存两个端点引用的设备tag加端子序号而不是存坐标。因为设备一旦移动坐标就失效存引用关系设备移动后重建连线时重新取坐标即可。这个习惯能让组态工具少掉大量重算逻辑也是图和数据分离的基础。5. 避坑SVG 电力图元最容易翻车的 5 个细节这一章写踩坑经验。前四章讲怎么做对这一章讲哪里会做错。5.1 视图坐标越画越偏viewBox 与用户单位混用的坑现象图元插入页面后有的偏左上、有的居中同一个图元在普通屏上正常接入组态工具后却被裁剪掉一半。原因图元内部统一定了viewBox但外部容器或父级g又套了不同的viewBox或者transform多个坐标系叠加导致本地坐标被二次解释。另一个常见原因是混用用户单位和像素有人把viewBox设成0 0 48 48又用width48px直接指定显示尺寸一旦父级缩放比例不是1比1内部线条就偏离预期。解决所有图元只依赖viewBoxwidth和height交给外部统一缩放父级画布只维护一个全局viewBox不要给每个设备再套带viewBox的独立svg设备统一用g承载。我习惯在插入图元后做一次自检查询getBoundingClientRect确认设备中心落在预期位置偏差超过一个像素就检查父级transform。5.2 放大后线条粗细失控non-scaling-stroke 与像素对齐现象图元缩到50%时1px的线变成半透明细线放大到200%时线粗得像是拿记号笔画上去的。原因stroke-width默认受viewBox缩放影响。viewBox是0 0 48 48显示尺寸越大用户单位放得越大线条跟着等比放大。小屏上0.5px的线在低DPI屏幕渲染不出来高DPI屏幕上又粗细不一。解决给所有结构线加vector-effectnon-scaling-stroke让笔宽始终等于像素值。加完之后图元缩小不会糊放大也不会突兀。如果不希望所有线都这样只给wire加也行但device-body的边框如果不同步会比较难看。笔宽建议统一1.5px粗线比如母线用单独class控制到3px。5.3 状态颜色死活不生效内联样式与 CSS 优先级现象脚本把class切成device-state-fault设备颜色纹丝不动打开控制台看到class和样式都定义对了就是不显示。原因SVG内部某个元素写了fill#fff内联样式内联样式优先级高于外部CSS的class规则后者覆盖不了。从CAD或绘图工具导出的SVG尤其常见工具会把每个元素的fill和stroke都写死。解决执行零内联样式约定图元模板里不允许出现fill、stroke、opacity这些样式属性全部用class。历史遗留图元用批量脚本清理遍历元素把fill和stroke属性删掉保留结构。删完再测一遍状态切换。我改造老图时被这个坑折腾过两次第一次以为是浏览器缓存后来发现某条line上写着一行fill#000。5.4 use 实例各染各色失败symbol 复用的样式隔离问题现象把断路器做成symbol idsym-brk页面上放四个use想让其中一个变红结果四个一起变红或者一个都变不了。原因use引用的是克隆子树外部CSS能作用到use元素本身但不一定能按预期穿透到克隆后的内部元素。即便有些浏览器支持部分穿透规则也随元素层级变化而不同。当你要让同一符号的不同实例有不同状态色时use的模型基本是最差选择。解决动态电力图元不走use走模板字符串加DOM克隆也就是3.3节的createDevice函数路径。每个实例都是真实DOM子树实例间样式天然隔离。use只留给纯静态且不区分状态的图元比如母线编号框、设备铭牌框。5.5 旋转后图元跑位SVG 旋转中心与 transform-box现象把隔离开关图元转90度结果它没有原地旋转而是画着大圆弧飞到了画布右下角。原因SVG的transformrotate(90)默认绕坐标系原点(0,0)旋转而图元中心在(24,24)。坐标系原点在图元之外旋转自然就平移到远处。如果图元直接挂在画布根节点下绕(0,0)旋转就是绕画布左上角。解决旋转时显式指定中心点写成transformrotate(90 24 24)或者在CSS里写transform-origin: center; transform-box: fill-box;让旋转中心跟随图元自身包围盒。这里注意transform-box属性的兼容性老一些的嵌入式WebView不支持要兼容工控屏的话最稳的还是把中心坐标写进transform参数。6. 进阶把图元沉淀为组件库的验证习惯图元多了之后最大的风险不是画不出来而是改一个公共CSS牵动全部图元导致某个符号悄悄变形。我给自己定了个习惯每个图元库必须配一张视觉回归页把所有图元平铺渲染同时展示四种状态。6.1 组件化注册与主题替换的最小结构公共样式用CSS变量管理主题切换只改变量不碰每个图元的模板:root { --color-wire: #2d3a4a; --color-body: #ffffff; --color-fault: #e02020; --color-alarm: #ff8c00; --color-offline: #b0b0b0; } .device-body { fill: var(--color-body); stroke: var(--color-wire); } .device-state-fault .device-body { fill: #ffdddd; stroke: var(--color-fault); }图元模板里不允许直接用色值只写class换肤就是换CSS变量那块。机房夜间模式、大屏高对比模式都能靠这个撑住。6.2 一张视觉回归页验证全部图元我通常会把断路器、隔离开关、接地、变压器各放一行每行同时渲染正常、告警、故障、检修四个状态然后用固定分辨率截图对比。const cases [ { type: breaker, label: 断路器 }, { type: ground, label: 接地 }, { type: transformer, label: 变压器 } ]; const states [normal, alarm, fault, offline]; cases.forEach(c { states.forEach(s { const g createDevice(c.type, c.label - s, test-${c.type}-${s}); g.setAttribute(class, device-${c.type} device-state-${s}); document.getElementById(regression-grid).appendChild(g); }); });改一次公共样式截图一次看四行样本没有异常才敢提交。这条习惯帮我拦下过至少两次“改完全部断路器都变绿”的翻车。另外验证不能只看静态截图还要手动触发一次状态切换确认normal到fault的闪烁动画和颜色都正常。最后说个教训以前我在某个模拟项目里图元尺寸写了固定像素没走viewBox结果从普通屏搬到55寸触控大屏时整个接线图错位熬夜重画了一整版。从那以后所有图元一律以viewBox为唯一真实坐标显示尺寸只由外部缩放决定。这套方案按上面的做法搭一遍两天内就能在你的项目里跑起来。希望帮到你。本文还有配套的精品资源点击获取
