VUE3 中导入Visio 图形

        微软的Visio是一个功能强大的图形设计工具，它能够绘制流程图，P&ID，UML 类图等工程设计中常用的图形。它要比其它图形设计软件要简单许多。以后我的博文中将更多地使用VISO 来绘制图形。之前我一直使用的是corelDraw。

        Visio 已经在工程设计中得到广泛的应用。

本博客讨论如何将Visio 设计的SVG 导入webHMI。

目的与方法

        我的目标是使用Visio 绘制石化行业的工艺和仪表流程图（P&ID ），并将它导入VUE3 的前端显示出来。

•   直接导入Web 不做任何的修改和添加
•   图形要能够携带一些数据属性
•   能够与后端的OPC UA 模型相对应
• 实现图形可点击

之前我曾经使用其它的方式：

• 使用autoCAD 绘制，输出DXF
• 使用corelDaw ，Inkscape 等软件绘制，然后人工添加内置的javascript小程序
• 使用javascript 的widget  canvas 绘制
• 使用SVG和svidget 插件实现。

         在我过往的博文中可以找到我的实验，这些方法或多或少需要额外的编程，或者格式转换。这次我们尝试直接导入Visio 产生的SVG 图形。

实现 

简单的P&ID 图

使用Visio 就不多说了，我画了一个简单的P&ID图。

Visio 图形添加数据属性

        图形中需要包含一些数据，最常见的需要一个DataTag 能够将图形与后端数据相对应，我这里使用OPCUA 作为后端信息模型，所以，至少我们需要OPCUA 节点的基本信息：

• NodeId
• BrowseName
• DisplayName
• NodeType

        值得庆幸的是Visio 图形支持添加数据属性，它们成为形状数据，添加的具体方式是右键点击图形，选择”数据“=》”定义形状数据“

你可以点击新建，添加新的属性，在上图中，我们添加了NodeId 。

当从Visio 导出SVG 文件时，形状数据会作为专用属性（v:custProps）

在前端载入时，我们要读取NodeId 的值，将它填写到 的onclick 参数中 （见下面的源代码）

SVG 嵌入到HTML 中

SVG 嵌入到HTML 网页中有许多的方法，之前我使用嵌入在