vue-webtopo-svgeditor：用 3 步把网络拓扑图搬进浏览器的 Vue3 SVG 图形编辑器

vue-webtopo-svgeditor：用 3 步把网络拓扑图搬进浏览器的 Vue3 SVG 图形编辑器

【免费下载链接】vue-webtopo-svgeditor基于vue3实现的svg可视化web组态编辑器。可无需修改代码动态添加svg组件项目地址: https://gitcode.com/gh_mirrors/vu/vue-webtopo-svgeditor

做监控大屏或网络管理系统时，如果希望用户直接在浏览器里绘制和改动拓扑图，而不是后台导出一张静态图，要么自己从零搭画布编辑器，要么找一个现成方案。vue-webtopo-svgeditor 就是其中一个：基于 Vue 3 + TypeScript 的 SVG 图形编辑器，svg 文件放进图形库，就能变成可拖拽、可缩放、可旋转的节点。

它是如何做到的：svg 文件本身就是节点

核心设计是"svg 文件即组件"。编辑器解析 svg 后自动加载为图形库节点，拖动、缩放、旋转这些交互已经内置，接入方不用写交互代码。图形库条目靠配置文件管理，目录见 src/config-center/，结构开放，可以加自定义属性。

另一个值得一提的能力是"有状态组件"：节点外观绑定在某个状态上，数据一变，填充色、把手透明度等多个属性联动更新。断路器分合闸、链路在线离线这类诉求，就是靠它实现的。此外它支持把 Vue 组件和 ECharts 嵌进画布，也内置了连线锚点、右键快捷操作和组件树。

什么场景下这个 SVG 图形编辑器用得顺手

• Web 组态与监控大屏：不用改代码，配好图形库即可用，业务人员能自行完成网络拓扑图在线绘制，省掉一轮开发联调。
• 已有 Vue 3 系统：npm 包 webtopo-svg-edit 提供编辑与预览两个组件，正在找 Vue 端 SVG 编辑器的团队可以直接集成。
• 需要动态控制节点的场景：状态驱动意味着真实业务数据和节点外观能联动，画的不只是静态图。

两条边界需要留意：它只官方支持 Vue 3，Vue 2 项目得用 iframe 或 CDN 方式嵌入；插件方式引入时工具栏图标不会直接显示，需要自行把项目里的 svg 转成 symbol。另外仓库示例图形是 1024x1024 规格，自己的图形用其他规格可能出现显示差异。

最小接入步骤：从安装到可编辑共 3 步

1. 在新建或已有的 Vite 项目里执行pnpm i webtopo-svg-edit pinia，并在 main.ts 注册 Pinia。
2. 在需要的页面引入编辑器：

import { WebtopoSvgEdit } from 'webtopo-svg-edit' import 'webtopo-svg-edit/dist/style.css'

3. 把自己的 svg 放进 src/assets/svgs/，再在 src/config-center/ 下补一份配置文件，name 与文件名保持一致。卡住时直接看 demo/ 里的集成示例。

手头有 Vue 3 项目的话，先跑一遍 demo，半天就能判断它的交互方式和图形库规格是否贴合你的业务。

【免费下载链接】vue-webtopo-svgeditor基于vue3实现的svg可视化web组态编辑器。可无需修改代码动态添加svg组件项目地址: https://gitcode.com/gh_mirrors/vu/vue-webtopo-svgeditor