Vue-WebTopo-SVGEditor：五分钟跑起一个开源 SVG 拖拽式组态编辑器

Vue-WebTopo-SVGEditor五分钟跑起一个开源 SVG 拖拽式组态编辑器【免费下载链接】vue-webtopo-svgeditor基于vue3实现的svg可视化web组态编辑器。可无需修改代码动态添加svg组件项目地址: https://gitcode.com/gh_mirrors/vu/vue-webtopo-svgeditorVue-WebTopo-SVGEditor 是一个基于 Vue3 TypeScript 实现的 SVG 可视化 Web 组态编辑器让你用拖拽 连线的方式拼出拓扑图和流程图SVG 文件直接就是图形库里的组件无需额外封装。1. 这东西替你干了什么别再手写 SVG 拓扑图代码自己画一张网络拓扑或工厂组态图意味着要自己处理 SVG 坐标换算、锚点事件、连线吸附这一堆细节调一下午可能才调出个雏形。Vue-WebTopo-SVGEditor 把这套能力做成了开箱即用的编辑器从左侧图形库拖组件进画布、点锚点连线、拖把手缩放旋转整条画 → 操作 → 连线 → 改属性链路全是鼠标驱动。目标场景就是网络拓扑、电气组态、流程图、白板协作这类一切能用矢量图形表达的需求。打开首页就是这样的布局左侧图形库中间 SVG 画布右侧属性面板。2. 五分钟跑起来克隆、安装、启动开发服务器⚡️ 先确认环境Node.js 16 比较稳。另外这个项目在package.json的preinstall里强制了 pnpmnpm / yarn 会在安装环节直接被拦下来所以一开始就用 pnpm能省一次报错。第一步克隆仓库git clone https://gitcode.com/gh_mirrors/vu/vue-webtopo-svgeditor.git cd vue-webtopo-svgeditor第二步安装依赖pnpm install # 其他包管理器在这里只是示意preinstall 会拦截别用 # npm install / yarn install此时终端应无报错项目下生成node_modules目录。第三步启动开发服务器pnpm dev此时终端应出现App running at: http://localhost:3001/。浏览器打开这个地址就是编辑器界面/edit是纯编辑页/preview是预览页路由定义在src/router/index.ts可以翻一下。3. 第一次交互画、连、改边操作边讲原理动作一绘画。左侧组件库点选任意图形按住左键拖到画布。背后是编辑器把图形库里的 SVG symbol 克隆进画布 DOM并记录节点包围盒的坐标后续所有变换都基于这个框算。动作二连线。鼠标悬停到组件上会出现连线锚点左键点击锚点生成线段继续左键点击画布就连续延伸右键结束。本质上线段就是一条条 SVG line 元素编辑器根据你点击的位置计算端点坐标、生成并追加到画布里把线段的端点拖到新位置它只是更新了这条 line 的坐标属性。动作三锚点编辑。选中节点后出现缩放、旋转锚点直接拖拽即可移动 / 缩放 / 旋转右侧面板可以改配置里声明过的节点属性右键菜单还有锁定、成组等快捷操作。想玩状态的话看左侧的有状态组件一个开关状态同时驱动填充色和把手透明度这类多个属性而不是逐个属性去改。上面这些行为对应的图形配置都集中在src/config-center/排查任何为什么它长这样的问题先 CtrlF 这个目录。4. 从能用到按我的样子来自定义 SVG 图形库 加一个自己的图形完整链路就三步素材放哪SVG 文件丢进src/assets/svgs/。注意把你想动态修改的属性比如fill从文件里删掉不然编辑器的配置覆盖不进去配置文件怎么写在src/config-center/对应目录下建一个配置文件无状态组件的最小配置长这样// src/config-center/svg-file/stateless/alternator/index.ts export const alternator_svg_file: IConfigItem { name: alternator, // 必须与 svgs 目录下文件名一致 title: 发电机, type: EDoneJsonType.File, config: { can_zoom: true, have_anchor: true, actual_rect: true }, display: true, props: { fill: { title: 填充色, type: EConfigItemPropsType.Color, val: #00ff00 } } };注册分组把该配置对象加进src/config-center/svg-file/stateless/index.ts的list数组左侧图形库就会出现它。高频定制点如果你只想 X改这里你只想改哪里新增一个 SVG 图形src/assets/svgs/放文件 src/config-center/svg-file/加配置 注册到分组改分组名 / 隐藏某个图形分组文件里的title/ 配置里的display一个状态控制多个属性props换成state参考src/config-center/svg-file/stateful/circuit-breaker/index.ts往画布塞 Vue 组件echarts、element-plussrc/config-center/vue/下按组件建配置字段全貌不想猜的话类型定义就在src/config-center/types.ts。5. 踩过的坑 延伸弹药高频问题现象 → 一行药方npm 安装报 only-allow pnpmpreinstall写死了 pnpm统一pnpm install即可。随便改点代码 eslint 满屏红那是 vite-plugin-eslint 的实时检查VSCode 装上 ESLint 插件才能看到真实报错定位。图形中心点和鼠标对不上在页面设置里匹配 x / y 轴数据素材建议对齐 1024×1024 规格。以插件方式集成后工具栏图标不显示用你自己项目的 svg 加载器把 icon 转成 symbol命名svg-xxx。端口 3001 被占用改package.json里 dev 脚本的--port参数。延伸资源demo/目录库模式和 UMD 两种集成方式的完整示例工程想把编辑器塞进自己的项目时先抄它src/views/下的 demo 路由/edit-load加载已有 JSON、/set-node-attr动态改节点属性这类典型用法都挂在页面上想查 API 用法直接看仓库的 issues 区卡住的时候先看这里集成相关的常见坑基本都有人踩过并留了答案。别再对着文档看打开终端敲pnpm install拖一个图形上画布十分钟后你就知道它顺不顺手了。【免费下载链接】vue-webtopo-svgeditor基于vue3实现的svg可视化web组态编辑器。可无需修改代码动态添加svg组件项目地址: https://gitcode.com/gh_mirrors/vu/vue-webtopo-svgeditor创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考