干了这么多年前端，和电力系统打交道也算是"老"话题了。电网调度、变电站监控、配网自动化，这些系统里绕不开的一环就是拓扑图——把断路器、隔离开关、变压器、母线这些一次设备，用图形的方式画到屏幕上，还要能看实时状态、做操作。以前我带的团队接到这种需求，第一反应就是直接对着SVG标签开写。结果第一版还行，等节点多起来、要加交互、要适配不同分辨率的时候，维护成本那是真的酸爽。
后面我改用Vue3+SVG.js这套组合来做，效果立竿见影。SVG.js本身是一个轻量级的SVG操作库，它不跟你抢框架的活，也不搞重型组件体系，就是把"创建SVG元素、改属性、绑事件"这些最繁琐的事情封装成了链式API，配合Vue3的响应式数据，写电力系统拓扑图比手搓原生SVG省了一倍以上的代码量。这篇文章把完整的实现思路、布局方案、交互处理和可运行的代码都放在这，适合正在做电力监控、工业组态、网络拓扑展示的同学直接参考。
1. 项目背景与方案选型
1.1 手搓SVG的三大痛点
先说为什么不能"想不开"去手搓SVG。电力系统拓扑图最核心的诉求有两个：一是图形要标准，母线、断路器、变压器、接地刀闸这些图元长什么样，行业里基本有约定，不能随手乱画；二是状态要动态刷新，断路器合闸、分闸，线路带电、失电，这些状态一变，图形的颜色、样式就得跟着变。
手搓SVG的时候，最直接的痛点是字符串拼接。为了一张带几十个节点的拓扑图，你得写一大串<rect>、<circle>、<line>加文字标签，全是XML标签的堆砌。如果节点是从后端接口动态拉取的，那就得在JavaScript里拼字符串，拼错了还不好查。第二个痛点是事件绑定，原生SVG虽然支持click、mouseenter这些事件，但动态创建的元素事件绑定和销毁很容易出现泄漏，尤其是拖拽移动这种高频交互，稍不注意就有残留监听。第三个痛点是图形更新，你想改一个变压器的颜色，得先根据id找到元素，再一条条改attribute，代码量一多，写起来非常啰嗦。
SVG.js把这三块全给治了。它的API是链式调用，创建一个图形返回一个元素对象，改属性和样式就是.fill()、.stroke()、.move()，一行代码搞定。事件绑定也简单，.on('click', handler)这么一挂，元素销毁的时候.off()全部解除，没有泄漏的烦恼。更别提group分组、路径动画这些可以用很低成本实现的能力，放着不用太可惜。
1.2 为什么选SVG.js而不是D3/Canvas
有人会问，拓扑图用Canvas画行不行？用D3.js画行不行？都可以，但分场景。电力系统拓扑图的特点是：节点数量通常不会达到上万个，一般几百个到几千个，但是每个节点的交互要求很高，你要点选、拖拽、右键菜单、状态高亮。Canvas在这种场景下需要自己实现点击命中检测，你得维护一个坐标映射表，复杂度反而上去了。D3.js强在数据驱动文档，它是做数据可视化的，强行用来做电力组态图，能行但太重，学习成本也高。
SVG.js的定位正好卡在中间：比原生SVG好用，比重型图表库轻量。它跟Vue3组合的时候，还有一个特别舒服的点——我可以把"真实数据"放在Vue的ref里，把"图形对象"放在SVG.js的元素引用里，两者通过自定义Map结构建立映射。数据一变，我主动调用对应图形更新；图形一交互，我再把结果写回数据。这套双向同步的模式，代码清晰，排查问题也方便。
2. 环境搭建与SVG.js核心概念
2.1 极简环境：创建Vue3工程并安装SVG.js
如果你还没建工程，直接用Vite初始化就行，这是目前最顺手的组合。
npm create vite@latest power-topo-demo -- --template vue cd power-topo-demo npm install npm install @svgdotjs/svg.jsSVG.js的3.x版本包名已经变了，踩坑提醒一下：如果你搜到的是svg.js这个老包名，那是2.x版本，API有一定出入。我们统一用@svgdotjs/svg.js。
安装完之后，最基础的使用方式是：
import { SVG } from '@svgdotjs/svg.js' // 创建一个画布，挂在某个div里 const draw = SVG().addTo(container).size(800, 600)这里的container是DOM元素，可以是ref.value。一旦执行，SVG.js会在这个div内部生成一个<svg>节点，所有后续图形都是在这个svg节点里创建的。接下来你就可以画矩形、圆形、路径了，代码都很直接。
2.2 SVG.js常用API速览
我挑几个后面电力拓扑图里绝对用得到的API讲，一次性列全会让新手看懵，但这个量级的速览是必要的。
创建形状
// 矩形：画母线、图例背景 const rect = draw.rect(120, 40).fill('#1e9fff').stroke({ width: 2, color: '#0b5b8c' }) // 圆形：画节点、电气连接点 const circle = draw.circle(24).fill('#fff').stroke({ width: 2, color: '#333' }) // 直线：画电气连线 const line = draw.line(100, 100, 300, 100).stroke({ width: 2, color: '#666' })文本和分组
// 文字标签：设备名称、编号 const text = draw.text('主变#1').font({ size: 14, family: 'Microsoft YaHei' }).fill('#333') // 分组：把图形+文字组成一个整体 const group = draw.group() group.add(rect) group.add(circle) group.add(text)分组是SVG.js里特别重要的概念。一个设备节点，往往是一个图形、一个内部小图标、一个文字标签的组合体。我习惯把一个节点所有元素放进一个<g>分组里，然后给这个分组设置统一的transform、事件、拖拽逻辑，比单独维护每个元素省心得多。
3. 电力系统拓扑图的数据设计与图元规划
3.1 图元类型与行业约定
电力系统拓扑图常见的图元有母线、变压器、断路器、隔离开关、接地刀闸、电容器、电抗器和线路。行业里对图形画法有一些默认习惯：母线通常是粗实线，断路器是带"×"或"竖线"的方块或圆，变压器一般用两个叠加的圆圈表示。做项目的时候，甲方可能直接给你一套图元规范，那最好以甲方的为准；但如果没人给你，你就按行业约定画，别自己发明。
我把图元分成了三类：
- 矩形类：母线、刀闸类设备
- 圆形类：断路器、电气连接点
- 组合类：变压器（双圆）、接地刀闸（直线+三角）
以组合类为例，SVG.js画起来并不复杂：
// 变压器：两个圆+中间连线 const group = draw.group() const circle1 = group.circle(32).move(0, 0).fill('#f0f0f0').stroke({ width: 1.5, color: '#333' }) const circle2 = group.circle(32).move(0, 40).fill('#f0f0f0').stroke({ width: 1.5, color: '#333' }) const connector = group.line(16, 16, 16, 40).stroke({ width: 2, color: '#333' })整个变压器设备在拓扑图里有一个锚点坐标（x, y），也就是分组左上角的位置。后面所有布局计算都围绕这个锚点来做。
3.2 数据结构：节点表与连线表
拓扑图本质上就是一张图（Graph），核心数据结构是节点表加连线表。我在Vue3里用ref维护这两份数据，它们是所有图形渲染的唯一数据源。
const nodes = ref([ { id: 'node-1', type: 'busbar', // 图元类型：母线 name: '110kV I段母线', x: 200, y: 100, angle: 0, // 旋转角度，部分图元需要 state: 'normal', // 状态：normal/active/disabled/fault data: { voltage: '110kV' } // 业务扩展数据 } ]) const edges = ref([ { id: 'edge-1', from: 'node-1', // 起点节点id to: 'node-2', // 终点节点id state: 'online', // 线路状态 path: [ // 可选的路径点，用于折线 { x: 200, y: 140 }, { x: 200, y: 200 } ] } ])这里有个实践经验：连线不要存成"起点坐标->终点坐标"两个值，要存成"起点节点id->终点节点id"。因为一旦节点被拖拽，连线的坐标需要联动更新，如果你只存坐标，就得额外维护坐标与节点的关系，容易不一致。存了节点id，拖拽时直接根据两个节点的最新坐标重新计算连线两端位置就行。
4. 核心实现：SVG.js渲染与布局
4.1 通用渲染函数：一图元一函数
我在实际项目里是把渲染逻辑拆成一个个独立函数，每个函数只负责一种图元的绘制。这样代码结构清晰，新增图元类型时也不会动到既有代码。
function renderNode(draw, node, nodeMap) { let g = null switch (node.type) { case 'busbar': g = drawBusbar(draw, node) break case 'breaker': g = drawBreaker(draw, node) break case 'transformer': g = drawTransformer(draw, node) break default: g = drawDefaultNode(draw, node) } // 把SVG.js元素引用和Vue数据绑定 g.node.setAttribute('data-node-id', node.id) g.on('click', () => handleNodeClick(node)) nodeMap.set(node.id, g) return g }nodeMap是核心的映射表，一个Map结构，key是业务节点id，value是SVG.js分组元素。有了它，后续要更新节点颜色、位置、状态，直接通过id取到图形对象，执行.fill()、.move()等操作，不用再费劲地document.getElementById去找节点了。
4.2 母线、断路器与变压器的绘制细节
母线在电力拓扑里就是一个矩形或横向的粗线条。如果是双母线接线，需要画两条平行线。我这里用矩形表示，方便后续加高亮边框：
function drawBusbar(draw, node) { const g = draw.group() g.rect(160, 12).move(node.x, node.y).radius(2) .fill('#c7e5ff') .stroke({ width: 2, color: '#1e9fff' }) g.text(node.name).move(node.x, node.y + 18).font({ size: 12 }) return g }断路器的图形画法比较多，我项目里用的是圆形加内部斜线，比较直观。设备状态通过颜色区分，合闸为绿色边框、分闸为灰色边框、故障为红色边框：
function drawBreaker(draw, node) { const g = draw.group() g.circle(26).move(node.x, node.y) .fill('#fff') .stroke({ width: 2.5, color: getColorByState(node.state) }) // 内部斜线 g.line(node.x + 6, node.y + 6, node.x + 20, node.y + 20) .stroke({ width: 2, color: '#666' }) return g }这里注意坐标逻辑：circle.move(x, y)是圆形的左上角坐标，不是圆心坐标。所以如果你想让圆形以 (x, y) 作为中心，就自己减掉半径，或者封装一个drawCircleAt(cx, cy, r)。这个坐标偏移的坑，新手经常栽进去。
变压器我通常画得稍大一些，内部要能容纳文字或编号。上面已经给过双圆的示例，这里补充一点：当图元组合包含文字时，文字的坐标要跟随分组移动，所以不要用绝对坐标，而应该相对分组内部计算。这也是用group.move(x, y)统一管理的好处。
4.3 布局策略：坐标计算不要硬编码
电力系统拓扑图的布局是个大学问。简单场景下，图元数量少，手动摆坐标也行。但很多时候我们需要根据设备信息自动生成布局，或者至少给一个相对合理的默认布局。
我的做法是分层布局。母线作为顶层骨架，先确定母线的位置；然后变压器、主变进线、馈线柜这些设备按间隔均匀分布在母线下方；最后把连线接上。这个逻辑用代码表达就是：
function generateLayout(deviceList) { let x = 50 let y = 60 const gapX = 180 const result = [] for (const device of deviceList) { if (device.type === 'busbar') { // 母线宽度固定，放顶部 result.push({ ...device, x: 30, y: 30 }) } else { // 其他设备依次排列 result.push({ ...device, x: x, y: y }) x += gapX } } return result }这段代码很粗，但思路是通用的：布局函数只依赖设备列表，不依赖任何图形对象。算完坐标之后，再把结果塞给渲染函数。这样数据与图形完全解耦，后面如果要做自动布局优化，直接改这个函数就行，不用碰渲染层。
4.4 连线绘制：直线、折线与端点吸附
连线的绘制，最省事的方案是直线连接两个节点的锚点。电力拓扑图里，如果设备节点较多，直线会交叉混乱，这时需要用折线，也就是自动计算"先横后竖"或"先竖后横"的路径。
我先实现一个简单的直线版本：
function renderEdge(draw, edge, nodeMap) { const fromNode = nodeMap.get(edge.from) const toNode = nodeMap.get(edge.to) if (!fromNode || !toNode) return // 计算节点中心坐标 const fromBox = fromNode.rbox() const toBox = toNode.rbox() const x1 = fromBox.cx const y1 = fromBox.cy const x2 = toBox.cx const y2 = toBox.cy const line = draw.line(x1, y1, x2, y2) .stroke({ width: 2, color: '#8c8c8c' }) return line }这里的核心是rbox()方法，它返回元素在SVG坐标系里的实际包围盒，包含cx、cy就是几何中心坐标。用中心坐标连接，能避免线头埋进图形元素里，看起来更规范。
如果要做折线，实现会复杂一些。常见的拐角算法是：从起点出发先水平走一段，再垂直走一段，最后水平走到终点。判断方向要根据两个节点的相对位置。这种算法我在项目里维护了一份，虽然代码量不大，但很实用，后面有时间我再单独写一篇展开。
5. 交互与状态联动
5.1 点击选中与高亮
拓扑图没有一个帅气的交互，没法交付。最基本的交互是点击设备节点，高亮显示并弹出设备详情。SVG.js事件绑定方式与原生一致：
g.on('click', (event) => { event.stopPropagation() clearAllSelection() // 高亮：修改分组内所有元素的描边颜色 g.children().each(function () { this.stroke({ color: '#ff7700', width: 2 }) }) selectedNodeId.value = node.id })这里有个细节：children()返回的是SVG.js子元素集合的包装对象，用.each()遍历时，回调函数里的this是每个子元素的SVG.js对象。有些新手会先g.children().toArray()得到原生元素再处理，其实没必要，直接在each回调里操作就行。
高亮分组中所有元素的方式，简单直接，但有一点要小心：如果文字元素也有描边属性，这个操作会把文字描边也改了，视觉上会变粗。所以更精确的做法是给每个图元单独设置一个>npm install @svgdotjs/svg.draggable.js
然后在组件里引入并绑定：
import '@svgdotjs/svg.draggable.js' g.draggable() g.on('dragmove', (event) => { const { handler, box } = event.detail // box是当前图元的新包围盒 node.x = box.x node.y = box.y updateEdgesByNode(node.id) }) g.on('dragend', () => { // 拖拽结束，数据已经通过dragmove同步到node // 这里可以把最终坐标提交到后端 saveNodePosition(node.id, node.x, node.y) })dragmove的event.detail里有一个box对象，包含当前元素的 x、y 坐标。用它更新Vue里的数据，然后调用updateEdgesByNode(node.id)重算所有与这个节点相连的连线坐标。
联动连线的核心实现是：遍历所有边，找到 from 或 to 等于被拖拽节点的边，重新计算两端坐标。
function updateEdgesByNode(nodeId) { for (const edge of edges.value) { if (edge.from !== nodeId && edge.to !== nodeId) continue const obj = edgeMap.get(edge.id) if (!obj) continue const fromNode = nodeMap.get(edge.from) const toNode = nodeMap.get(edge.to) if (!fromNode || !toNode) continue const fromBox = fromNode.rbox() const toBox = toNode.rbox() obj.plot(fromBox.cx, fromBox.cy, toBox.cx, toBox.cy) } }line元素SVG.js里用plot()方法更新坐标，我觉得比stroke()更直观。另外，edgeMap和nodeMap一样，是连线的SVG.js元素引用表。这两个Map就相当于图形层的缓存，所有更新都走Map，不会直接去querySelector，效率高很多。
5.3 缩放与平移画布
拓扑图节点一多，画面放不下怎么办？我需要支持滚轮缩放和拖拽平移。SVG.js里有viewbox()方法，这是实现缩放平移的关键。
let currentZoom = 1 const vb = draw.viewbox(0, 0, container.clientWidth, container.clientHeight) function handleWheel(event) { event.preventDefault() const delta = event.deltaY > 0 ? 0.9 : 1.1 const newZoom = Math.min(Math.max(currentZoom * delta, 0.3), 2.5) const factor = newZoom / currentZoom // 以鼠标位置为中心缩放 const mouseX = event.offsetX * factor const mouseY = event.offsetY * factor const newBBox = { x: vb.x + mouseX - (event.offsetX / currentZoom), y: vb.y + mouseY - (event.offsetY / currentZoom), width: vb.width / factor, height: vb.height / factor } draw.viewbox(newBBox) currentZoom = newZoom }这段缩放逻辑的比例换算比较绕，我用了比较久才调明白，核心思想是：缩放时保持鼠标所指的位置在缩放前后对应的图形坐标不变。实际项目中如果你不想自己算，也可以使用svg.panzoom这个第三方插件，但插件体验在边界处理上不一定贴合你的需求。自研的好处是后期自己维护可控性更强。
6. 完整组件代码与使用demo
6.1 TopologyView.vue核心代码
下面放一个能跑的完整版组件。这个组件不依赖UI框架，直接引SVG.js就能用。我把数据模拟成接口返回，这样你拿到手再说一句nodes.value = data就能刷新视图。
<template> <div ref="container" class="topo-container"></div> </template> <script setup> import { ref, onMounted, onBeforeUnmount } from 'vue' import { SVG } from '@svgdotjs/svg.js' import '@svgdotjs/svg.draggable.js' const container = ref(null) let draw = null const nodeMap = new Map() const edgeMap = new Map() const nodes = ref([]) const edges = ref([]) const selectedNodeId = ref('') // 颜色映射 const stateColorMap = { normal: '#1e9fff', active: '#20c997', fault: '#ff4d4f', disabled: '#bfbfbf' } onMounted(() => { draw = SVG().addTo(container.value).size('100%', '100%').viewbox(0, 0, 1000, 700) loadMockData() renderAll() bindCanvasEvents() }) function loadMockData() { nodes.value = [ { id: 'bus-1', type: 'busbar', name: '110kV I段母线', x: 40, y: 30, state: 'normal' }, { id: 't1', type: 'transformer', name: '主变#1', x: 180, y: 160, state: 'active' }, { id: 'qf-1', type: 'breaker', name: '进线开关#1', x: 320, y: 260, state: 'normal' }, { id: 'qf-2', type: 'breaker', name: '馈线开关#2', x: 520, y: 260, state: 'fault' }, { id: 'bus-2', type: 'busbar', name: '10kV II段母线', x: 380, y: 90, state: 'normal' } ] edges.value = [ { id: 'e1', from: 'bus-1', to: 't1' }, { id: 'e2', from: 't1', to: 'qf-1' }, { id: 'e3', from: 'bus-2', to: 'qf-2' } ] } function renderAll() { nodeMap.clear() edgeMap.clear() draw.clear() // 先画连线，防止连线盖住设备 for (const edge of edges.value) { renderEdge(edge) } // 再画设备节点 for (const node of nodes.value) { renderNode(node) } } function renderNode(node) { const g = draw.group() switch (node.type) { case 'busbar': g.rect(180, 14).move(node.x, node.y).radius(3) .fill('#e6f4ff').stroke({ width: 2, color: stateColorMap[node.state] }) g.text(node.name).move(node.x + 6, node.y + 20).font({ size: 12, family: 'Microsoft YaHei' }).fill('#333') break case 'transformer': g.circle(46).move(node.x, node.y) .fill('#fff7e6').stroke({ width: 2, color: stateColorMap[node.state] }) g.circle(26).move(node.x + 10, node.y + 10) .fill('#fff').stroke({ width: 1.5, color: '#666' }) g.text(node.name).move(node.x - 20, node.y + 54).font({ size: 12 }).fill('#333') break case 'breaker': g.circle(30).move(node.x, node.y) .fill('#fff').stroke({ width: 2.5, color: stateColorMap[node.state] }) g.line(node.x + 8, node.y + 8, node.x + 22, node.y + 22) .stroke({ width: 2, color: '#666' }) g.text(node.name).move(node.x - 20, node.y + 38).font({ size: 12 }).fill('#333') break } // 绑定事件 g.on('click', (event) => { event.stopPropagation() handleNodeClick(node) }) // 绑定拖拽 g.draggable() g.on('dragmove', (event) => { const box = event.detail.box node.x = box.x node.y = box.y updateRelatedEdges(node.id) }) g.on('dragend', () => { console.log('节点坐标已更新', node.id, node.x, node.y) }) g.node.setAttribute('data-node-id', node.id) nodeMap.set(node.id, g) return g } function renderEdge(edge) { const fromNode = nodes.value.find((n) => n.id === edge.from) const toNode = nodes.value.find((n) => n.id === edge.to) if (!fromNode || !toNode) return const fromEl = nodeMap.get(edge.from) const toEl = nodeMap.get(edge.to) if (!fromEl || !toEl) return const fromBox = fromEl.rbox() const toBox = toEl.rbox() const line = draw.line(fromBox.cx, fromBox.cy, toBox.cx, toBox.cy) .stroke({ width: 2, color: '#bfbfbf' }) edgeMap.set(edge.id, line) } function updateRelatedEdges(nodeId) { for (const edge of edges.value) { if (edge.from !== nodeId && edge.to !== nodeId) continue const line = edgeMap.get(edge.id) if (!line) continue const fromEl = nodeMap.get(edge.from) const toEl = nodeMap.get(edge.to) const fromBox = fromEl.rbox() const toBox = toEl.rbox() line.plot(fromBox.cx, fromBox.cy, toBox.cx, toBox.cy) } } function handleNodeClick(node) { clearSelection() selectedNodeId.value = node.id const el = nodeMap.get(node.id) if (el) { // 选中高亮：修改外框颜色和线宽 el.children().each(function () { if (this.type === 'rect' || this.type === 'circle') { this.stroke({ width: 3, color: '#ff8c00' }) } }) } console.log('选中设备', node) } function clearSelection() { if (!selectedNodeId.value) return const el = nodeMap.get(selectedNodeId.value) if (el) { el.children().each(function () { if (this.type === 'rect' || this.type === 'circle') { this.stroke({ width: 2 }) } }) } selectedNodeId.value = '' } function bindCanvasEvents() { draw.on('click', () => { clearSelection() }) } onBeforeUnmount(() => { draw.clear() draw = null nodeMap.clear() edgeMap.clear() }) </script> <style scoped> .topo-container { width: 100%; height: 600px; border: 1px solid #d9d9d9; background: #fafafa; border-radius: 4px; overflow: hidden; } </style>这段代码的长度看起来不短，但已经是手搓SVG方案的一半量级了。核心逻辑都在renderNode里，每种设备一个case分支，以后新增设备类型，加一个case就行。拖拽和点击事件在创建时直接绑定，更新逻辑集中在updateRelatedEdges，整个数据流是单向可追溯的。
6.2 父组件使用示例与刷新策略
在需要引入这个拓扑图的父组件里，你这样用就行了：
<template> <div> <button @click="refreshTopo">刷新数据</button> <TopologyView ref="topoRef" /> </div> </template> <script setup> import { ref } from 'vue' import TopologyView from './components/TopologyView.vue' const topoRef = ref(null) function refreshTopo() { // 如果子组件暴露了renderAll，可以直接调用 // topoRef.value.renderAll() } </script>默认情况下子组件数据是内部mock的，实际项目里建议把nodes.value、edges.value通过props传入，或者给子组件暴露一个setData(nodes, edges)方法。这块不强求，按你的接口设计来。唯一需要注意的是：每次数据变化，如果变化很大，直接调用renderAll全量重绘；如果只是某个节点状态变化，就只去nodeMap.get(id)然后改对应颜色，不要全量重绘，性能差很多。
7. 踩坑实录与性能优化经验
7.1 四个典型的坑
这个方案我从启动到稳定，大概踩了四个比较典型的坑，这里挨个说。
第一个坑是rbox()在画布有viewbox缩放时会返回缩放后的坐标系，而move()接收的坐标是内部坐标。两个混用，就会出现"拖拽时节点飞了"的诡异现象。解决方式是把节点坐标统一理解为内部坐标，拖拽回调里拿到的box就是内部坐标，直接存。连线计算用rbox()拿到的中心坐标，它返回的已经是当前视图坐标系下的值，但在同一次计算里两者是匹配的，所以连线不会错位。
第二个坑是拖拽事件冒泡。节点和连线都可能同时响应鼠标事件，节点一拖走，连线在旧位置残留，看起来就是一段线飘在空中。后来我把节点和连线分成了两个svg画布层，底层画连线，顶层画节点。这样拖拽节点不会碰到连线元素。
第三个坑是性能问题。当节点数量超过1500时，SVG元素太多，交互会有肉眼可见的卡顿。后来我的优化方案是：对于不可见区域的节点不渲染，或者把设备小图标简化。电力系统拓扑图一般不会到几千个节点，但如果你做的是配电网区域内的大数据大屏，就要注意了。
第四个坑是坐标精度。SVG.js默认使用小数坐标，但某些老版本的Chrome在渲染小数坐标的SVG元素时会有偏移。解决方式是在存储坐标时统一用Math.round取整。
7.2 性能优化：怎么扛住大型拓扑图
如果你真的遇到了大图场景，有几个优化手段很有效。
一是减少DOM操作频率。拖拽过程会连续触发dragmove，如果每次dragmove都在更新线条、改样式，浏览器扛不住。可以在事件回调里通过requestAnimationFrame合并计算：
let rafId = null g.on('dragmove', (event) => { if (rafId) return rafId = requestAnimationFrame(() => { node.x = event.detail.box.x node.y = event.detail.box.y updateRelatedEdges(node.id) rafId = null }) })二是对静态图形做缓存。如果某些设备图形完全不变，就只渲染一次，不要每次数据刷新都重建。SVG.js的remember()方法可以把自定义数据挂载到元素上，非常实用。
三是使用visibility或display控制元素显隐。状态变化时，不要去删除重建图形，而是用.hide()和.show()，这样保留元素的引用，性能好很多。
7.3 后续扩展建议
这套基础架构搭完之后，扩展方向很多。比如要做电气接线仿真，可以给连线增加带电状态的颜色流动动画，SVG.js的animate()就能实现。要做设备操作票流程，可以给设备节点加右键菜单，绑定到新的操作面板。要做大屏展示，可以把拓扑图组件嵌入Vue3大屏项目，与ECharts图表联动。
我个人体会最深的一点是：用SVG.js做电力拓扑图，最重要不是画图，而是把数据和图形的关系理清楚。数据模型稳定了，图形层怎么折腾都不会乱。你维护好nodeMap、edgeMap这两个映射，再加上一套清晰的图元绘制函数，项目就成功了大半。
最后再分享一个小技巧：这份代码里的图元绘制函数，其实可以直接抽象成独立的模块，比如elements.js文件，专门管理所有图元的绘制和更新。下次做网络拓扑、机房拓扑、物联网设备图时，改改数据结构就能直接复用。这也是我把所有绘制逻辑都封在renderNode这个函数里的原因——它对你后期的扩展友好得多。
