ByteNoteByteNote
字

字节笔记本

2026年2月23日

vue-webtopo-svgeditor：基于 Vue3 的 SVG 可视化组态编辑器

#开源工具

vue-webtopo-svgeditor 是一个基于 Vue 3.2 + TypeScript 实现的 SVG 可视化 Web 组态编辑器。它可以直接将 SVG 文件和 Vue 组件作为编辑器图形库使用，赋予其缩放、旋转等功能，并支持自定义拓展参数，实时控制组件状态。该项目在 GitHub 上已获得 506 stars 和 181 forks，采用 MIT 开源协议，可免费商用。

项目简介

vue-webtopo-svgeditor 是一个功能完整的可视化组态编辑器，专为工业控制、数据可视化等场景设计。它最大的特点是零学习成本——SVG 文件即组件，引入后无需额外配置，编辑器会自动解析加载组件。

在线预览: http://svg.yaolm.top/

核心特性

组态软件核心功能完备

无需特殊需求，只需配置好图形库，即可开始构建您的组态应用。支持拖拽绘图、节点操作、连线动画等完整功能。

学习成本低

SVG 文件即组件，引入后无需额外配置，编辑器会自适应解析加载组件。添加自定义组件与传统 HTML 开发无差异，前端开发者可以零学习成本上手。

易于拓展

配置文件采用开放式结构，属性支持自定义拓展。图形库支持添加 SVG 文件或 Vue 组件，定制开发变得简单。

易于集成

项目已编写好库模式脚本，组件已发布到 npm（webtopo-svg-edit），支持外部传入自定义组件，支持组件事件订阅。

免费开源

采用 MIT 开源协议，可商用（自带 SVG 文件除外）。

技术栈

  • Vue 3.2 - 前端框架
  • TypeScript - 类型安全
  • Vite - 构建工具
  • Pinia - 状态管理
  • SVG - 矢量图形

图形库类型

无状态组件

纯 SVG 文件，编辑器已封装好拖动、缩放、旋转等功能。如需动态设置颜色、边框等属性，需在 props 中配置，支持 SVG 公共属性如 fill、stroke、stroke-dasharray 等。

有状态组件

同样基于 SVG 文件，但配置在 state 上。优势是可以通过一个状态影响多个属性，例如断路器开关可同时改变颜色和把手透明度。

自带动画组件

支持直接使用自带动画的 SVG 文件。

自定义 SVG

本质是 Vue 的 template 代码片段，可以完全替代无状态/有状态组件，通过自定义代码实现更多节点和属性控制。

Vue 组件

与自定义 SVG 类似，但使用 foreignObject 包裹以支持 HTML 渲染，同样支持缩放旋转操作。

安装与集成

脚手架项目集成

bash
# 创建项目（已有项目跳过）
npm init vite@latest

# 进入项目目录
cd projectname

# 安装插件
pnpm i webtopo-svg-edit

# 安装 pinia
pnpm i pinia

修改 main.ts 注册 pinia：

typescript
import { createPinia } from 'pinia';
const app = createApp(App);
app.use(createPinia());
app.mount('#app')

在需要的页面引入插件：

typescript
import { WebtopoSvgEdit, WebtopoSvgPreview } from 'webtopo-svg-edit';
import 'webtopo-svg-edit/dist/style.css';

UMD 方式集成

html
<!DOCTYPE html>
<html>
<head>
  <title>webtopo-svg-edit Example</title>
  <link href="https://unpkg.com/webtopo-svg-edit@0.0.8/dist/style.css" rel="stylesheet" />
  <script src="https://unpkg.com/vue@3.2.6/dist/vue.global.prod.js"></script>
  <script src="https://unpkg.com/vue-demi@0.13.11/lib/index.iife.js"></script>
  <script src="https://unpkg.com/pinia@2.0.33/dist/pinia.iife.prod.js"></script>
  <script src="https://unpkg.com/webtopo-svg-edit@0.0.8/dist/webtopo-svg-edit.umd.js"></script>
</head>
<body>
  <div id="app"></div>
  <script>
    const pinia = Pinia.createPinia()
    const app = Vue.createApp(WebtopoYLM.WebtopoSvgEdit)
    app.use(pinia)
    app.mount('#app')
  </script>
</body>
</html>

使用说明

绘图

选中左侧组件库，按住鼠标左键即可将组件拖动到画布中。

节点操作

选中绘制好的节点后会出现锚点，可直接进行移动、缩放、旋转。右侧属性面板可设置节点属性，鼠标右键可进行快捷操作。

连线

鼠标移动到组件上会出现连线锚点，左键点击创建线段，继续点击画布连续创建线段，右键停止。选中线段后可在右侧动画面板设置动画效果。

如何添加图形库

  1. 将 SVG 文件放到 src/assets/svgs 目录下
  2. 修改 SVG 文件，删除需要动态修改的属性（如想动态修改填充颜色，需删除 fill 属性）
  3. 在 src/config-center 添加配置文件，确保 name 属性与 SVG 文件名一致

注意事项

  • 请使用 pnpm 安装依赖
  • 组件库来源均为网络，仅供学习交流，请勿用于商业用途
  • 插件方式引入时，左侧工具栏 icon 图标可能无法正确显示，需配置 SVG 加载器将 icon 转换成 symbol，命名为 'svg-xxx'
  • 本项目示例 SVG 文件规格为标准图标大小 1024x1024px

相关链接

许可证

MIT License

开源工具
上一篇

TinyCodes - 开源代码片段管理工具

下一篇

vue-webtopo-svgeditor：基于 Vue3 的 SVG 可视化组态编辑器

分享: