背景需求：在小程序中渲染activiti流程图，并在流程图中点击某个节点时跳转小程序中对应的页面。
小程序框架：uniapp
接到这个需求时，分解为了几步：
1.调研：bpmn、gojs等已有框架能否在小程序端实现?
——fail：生成流程图的web端需要对应使用同一套框架，而web端采用的还是activiti自带的配置页面，且没有需求要修改web端实现。
2.调研：小程序能否兼容svg且实现点击事件效果？
——fail：虽然目前小程序使用cax组件已可以支持svg渲染，但由于我们的项目使用的是uniapp，在使用小程序组件时不兼容。具体问题在这个issue下提及： 如何不使用小程序组建的形式在小程序中使用，我想在uniapp中使用应该怎么做？ · Issue #81 · dntzhang/cax · GitHub
3.调研：有无uniapp的组件能实现svg点击效果且兼容微信小程序？
——fail：无。
4.调研：echarts能否实现该需求？
——fail：
示例如：ECharts Gallery - 画一个流程图 (makeapie.com)
刚开始调研时发现此流程图虽然丑了一点，但还是可以勉强实现该需求。然后开始着手开发，开发中遇到一个无法解决的问题：uniapp插件市场中的mpvue-echarts，并不是echarts。该散点图的数据较为复杂，在mpvue-echarts中实现时出现报错且无法解决。而该数据格式在echarts中实现是可以渲染的。
5.调研：在h5中实现该需求？
——OK，需要H5支持获取到svg中节点id并能跳转至小程序中
具体实现步骤，以Vue项目为例：
（一 ）html代码部分：
（二）script代码部分：
1 在原有svg基础上增加个性化显示属性
2 为svg节点增加点击事件效果
提前注册handleClick事件到window上:
handleClick事件通过wx.miniProgram.navigateTo方法，从当前H5页面跳转至该节点绑定的小程序页面中；
3 为svg中的子节点绑定事件
刚开始我是使用以下代码为节点绑定事件，在测试阶段是可以运行的。
let btnTakePhotoDom =document.getElementById(`svg-${ id }`);
const code = shape.properties.overrideid
btnTakePhotoDom.setAttribute("v-on:click", `this.handleClick('${ code }')`);
但项目后期产品用ios手机验证时，发现svg无法在其设备上展示。在safari浏览器上调试时，报错：undefined没有找到setAttribute函数；
排查了一上午，解决safari兼容问题，最终解决：
拿到svg的字符串后，先渲染至页面中 =》 为要绑定事件的子节点增加标识id及绑定事件 =》 dom监听点击事件判断id触发对应的事件
最终实现效果
