需求介绍： 监控页面在不同的设备上可以看到工艺流程的动态，哪些设备在工作，进行到了哪个环节...
工艺流程静态图如下
实现思路分析
- 可以通过 div 的方式
拼凑一张图，然后 js 代码控制不同的 div 部件进行颜色变化。 - 可以通过 canvas 的方式绘制整张图，然后对画布内的元素进行控制。
- 可以找个第三方库，自定义形状
组合一张图出来，然后进行控制。 - 可以通过 svg 图的方式展示内容，然后对 svg 中的元素进行控制。
挨个分析方式的优缺点
方案1： 前端直接使用 div 方式操作方面很方便，但是渲染大量 dom 元素再加上后期添加交互操作，大量渲染和高频操作 dom 会有性能问题， div 绘制整张图代码量比较大。
方案2： canvas 绘制整张图，没有明显性能问题，通过代码控制的方式对于后期交互操作操作都可以，手动绘制代码量也不少。（可以借助在线工具绘制）
方案3： 第三方库实现方面操作一般更简单一点，需要找合适的库做简单的测试，使用的功能不多，但是引入了大量的库的其他代码。
方案4： svg 绘制整张图，没有明显性能问题，代码控制相对 canvas 更简便一点，手动绘制代码量也不少。（可以借助在线工具绘制 SVG在线编辑器-菜鸟工具）
综合分析方案 4 为最优解，也因为刚好找到了一个 svg 在线编辑工具，而且可以转成 svg 源码。
SVG在线工具绘图
使用在线工具绘图后导出来的 svg 源码中的 id 和实际项目中的设备 id 不匹配，这里要一一对应起来。
如：导出来的源码中的 id 是 svg_368 这种方式，项目中的设备 id 为 K1 命名方式，需要把源码中所有id对应成项目（静态图）中的设备 id 号.
<path stroke="#929292" id="svg_368" d="m358.403215,185.904032l-10.00328,-0.000005l0,27.490932l68.846232,0l0,19.325309" opacity="0.5" fill-opacity="0" stroke-width="0.5" fill="#ffffff" />
内容自动缩放显示
1.用 img 标签显示 svg 图片,设备宽高百分百，但是这里无法操作 svg 元素
<div style="border:2px solid green;width:1000px;height:600px;"> <img src="../img/3.svg" style="width:100%;height:100%;" /> </div>
2.直接把 svg 源码放到 div 中，如下，这里的 svg 图是不会自动缩放的
<div> <svg width="580" height="400" style="border:2px solid red;" xmlns="http://www.w3.org/2000/svg"> ... </svg> </div>
添加闪烁动画
这里使用 CSS3 @keyframes 规则, 改变图形元素的外轮廓。
.svg-stroke-width { animation: strokeWidth 3s infinite; } @keyframes strokeWidth { 0% { stroke-width: 0.1; stroke: #4eb8ff; } 100% { stroke-width: 1.6; stroke: #4eb8ff; } }
选择元素添加 class 样式即可
document.getElementById(element).classList.add('svg-stroke-width');
功能整合
基于一个输入框和一个按钮，手动操作进行部分设备（只支持 K1,C1,C2,C4,C3,K2）的流程动态效果设置。
GitHub 源码地址
参考链接
SVG在线编辑器-菜鸟工具 https://c.runoob.com/more/svgeditor/
developer.mozilla.org/zh-CN/docs/…
developer.mozilla.org/zh-CN/docs/…
