别再手搓SVG了！用Vue3+SVG.js快速搭建电力系统拓扑图（附完整代码）

Vue3+SVG.js：电力系统拓扑图的低代码实践指南

电力监控系统的可视化界面开发一直是工业软件领域的痛点——既要处理复杂的电网拓扑关系，又要兼顾实时数据更新与动态效果。传统手工编写SVG代码的方式不仅效率低下，维护成本也居高不下。本文将带你用Vue3组合式API与SVG.js构建可复用的电力图元组件库，实现拓扑图的声明式开发。

1. 为什么选择SVG.js而非原生SVG

在电力SCADA系统中，变压器、断路器这些设备需要频繁更新状态（比如颜色变化、旋转动画）。原生SVG开发面临三个核心问题：

1. 路径计算复杂：弧线、贝塞尔曲线等图元需要手动计算坐标
2. 状态管理困难：设备间的联动关系导致DOM操作繁琐
3. 性能瓶颈：频繁的DOM更新会影响渲染效率

SVG.js提供了更优雅的解决方案：

// 创建SVG画布 import { SVG } from '@svgdotjs/svg.js' const canvas = SVG().addTo('#container').size(800, 600) // 绘制变压器图标 const transformer = canvas.group() transformer.rect(60, 100).fill('#f5f5f5').stroke({ width: 2 }) transformer.circle(30).center(30, 30) transformer.circle(30).center(30, 70)

通过对比测试，使用SVG.js的开发效率提升明显：

2. 环境搭建与核心配置

2.1 初始化Vue3项目

推荐使用Vite创建项目模板，安装必要依赖：

npm create vite@latest power-topology --template vue-ts cd power-topology npm install @svgdotjs/svg.js @vueuse/core

2.2 SVG.js的Vue3适配方案

在src/utils/svg-utils.ts中封装基础工具类：

import { Ref } from 'vue' import { SVG, Svg, Element } from '@svgdotjs/svg.js' export function useSvgContext(containerRef: Ref<HTMLElement|null>) { const svgInstance = ref<Svg|null>(null) onMounted(() => { if (containerRef.value) { svgInstance.value = SVG().addTo(containerRef.value) } }) return { svgInstance } }

3. 电力图元组件化实践

3.1 基础图元封装

创建PowerLine组件处理输电线路：

<script setup lang="ts"> import { computed } from 'vue' const props = defineProps({ start: { type: Object as () => { x: number; y: number }, required: true }, end: { type: Object as () => { x: number; y: number }, required: true }, status: { type: String as () => 'normal'|'alert'|'offline', default: 'normal' } }) const lineStyle = computed(() => { return { normal: { stroke: '#52c41a', width: 2 }, alert: { stroke: '#f5222d', width: 3 }, offline: { stroke: '#d9d9d9', width: 1 } }[props.status] }) </script> <template> <path :d="`M ${start.x} ${start.y} L ${end.x} ${end.y}`" :stroke="lineStyle.stroke" :stroke-width="lineStyle.width" /> </template>

3.2 复合设备组件

变电站设备需要组合多个图元：

// 变电站组件 export function createSubstation(svg: Svg, config: { position: { x: number; y: number } voltageLevel: number }) { const group = svg.group() // 主变压器 group.rect(80, 120) .move(config.position.x - 40, config.position.y - 60) .fill('#1890ff') .attr('class', 'transformer') // 电压等级标识 group.text(config.voltageLevel + 'kV') .center(config.position.x, config.position.y + 80) return { updateVoltage(level: number) { group.find('text').first().text(level + 'kV') } } }

4. 动态数据绑定与性能优化

4.1 使用WebSocket实时更新

import { useWebSocket } from '@vueuse/core' const { data } = useWebSocket('ws://your-websocket-endpoint') watch(data, (newData) => { const topology = JSON.parse(newData) updateTopology(topology) }) function updateTopology(data: TopologyData) { data.devices.forEach(device => { const node = nodeMap.get(device.id) if (node) { node.updateStatus(device.status) } }) }

4.2 渲染性能优化技巧

1. 批量更新：使用requestAnimationFrame合并DOM操作
2. 虚拟渲染：只渲染可视区域内的元素
3. 缓存策略：对静态图元启用shouldUpdateComponent优化

// 批量更新示例 let updateQueue: Function[] = [] function enqueueUpdate(updateFn: Function) { updateQueue.push(updateFn) if (updateQueue.length === 1) { requestAnimationFrame(executeUpdates) } } function executeUpdates() { const queue = updateQueue updateQueue = [] queue.forEach(fn => fn()) }

5. 典型电力拓扑案例实现

以110kV变电站接线图为例，关键实现步骤：

1. 创建主接线骨架
2. 添加断路器、隔离开关等设备
3. 实现潮流方向动画
4. 绑定遥测遥信数据

// 断路器组件 function createCircuitBreaker(svg: Svg, position: Position) { const state = ref<'open'|'closed'>('closed') const icon = svg.group().translate(position.x, position.y) icon.line(0, 0, 30, 0).stroke({ width: 3 }) icon.circle(10).center(15, 0) function toggle() { state.value = state.value === 'open' ? 'closed' : 'open' icon.find('circle').first().fill(state.value === 'open' ? '#ff4d4f' : '#52c41a') } return { toggle } }

实际项目中遇到的坑：SVG.js在大量元素（超过5000个）时会出现性能下降，解决方案是对静态背景使用Canvas渲染，动态元素保留SVG实现。