画网络拓扑图不用从零造轮子：vue-webtopo-svgeditor 组态编辑器上手指南

画网络拓扑图不用从零造轮子：vue-webtopo-svgeditor 组态编辑器上手指南

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

📌 vue-webtopo-svgeditor 是一个基于 Vue 3 + TypeScript 的 Web 端 SVG 图形编辑器，用来画网络拓扑图、流程图和工业组态大屏。它解决的核心问题只有一个：把"SVG 文件"直接变成可拖拽、可缩放、可旋转、可连线的画布节点。最硬的优势在于扩展图形库基本不用写代码——丢进一个 SVG 文件、改一份配置文件，组件就自动出现在素材面板里。编辑器以 npm 包webtopo-svg-edit发布，支持 ESM 与 UMD 两种集成方式。

一张拓扑图，最费时的是准备素材

🔧 画过组态图的人大致都有同款体验：每个设备图标都要手写缩放、旋转、锚点逻辑；想改个图标颜色，得翻到渲染代码里找属性；两个图标之间的连线，端点拖不动、折线画不顺。这个编辑器把这类重复劳动全部封装掉，你要做的只剩三件事：

• 往素材库放图
• 在画布上拖、连线
• 在右侧面板调参数

这个 SVG 组态编辑器能做什么

• 拖拽成图：左侧素材面板按住组件拖进画布，支持撤销/重做、锁定与组件树管理。
• 锚点操作：选中节点后出现控制锚点，移动、缩放、旋转直接在画布上完成。
• 连线：悬停组件出现连线锚点，左键连续折线、右键收尾，线段端点可拖拽，还能给连线加电流、水滴等动画效果。
• 属性即配置：右侧面板动态生成表单，颜色、描边等 SVG 公共属性（fill、stroke）可实时修改。
• 有状态组件：一个状态同时驱动多个属性，比如断路器开合同时改变颜色与把手透明度。

技术选型：为什么是 Vue3 + 配置中心

图形库采用开放式配置结构，集中在 src/config-center/ 目录，按"无状态 SVG、有状态 SVG、自带动画 SVG、自定义 SVG、Vue 组件"五类组织。好处很直接：SVG 文件即组件，引入后编辑器自适应解析，无需额外注册；自定义属性随便加，右侧面板会自动渲染出对应表单项；需要更强逻辑时，Vue 组件可通过 foreignObject 包进 SVG，同样享受缩放旋转能力。状态管理用 Pinia，构建用 Vite——对熟悉 Vue 的工程师来说，二次开发几乎零学习成本，这也是选它而不是原生 DOM 方案的现实意义。

适合谁用，以及 3 步跑起来

上手只需三步：

1. git clone https://gitcode.com/gh_mirrors/vu/vue-webtopo-svgeditor
2. pnpm install（项目用 only-allow 锁定 pnpm）
3. pnpm dev，浏览器打开画布即可开始

新增图形的完整步骤写在 README.md 的"如何添加图形库"一节：SVG 放入src/assets/svgs/，再补一份同名配置文件。MIT 协议可商用（自带 SVG 素材除外），有兴趣的话直接去仓库看源码或提 issue 交流。

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