关于在H5页面的画布上添加图片的收获

 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"       version="1.1" width="100%" height="93%" viewBox="0 0 560 1000">                <!-- 定义箭头形状 -->        <defs>              <marker id="arrow"                   markerUnits="strokeWidth"                   markerWidth="12"                   markerHeight="12"                   viewBox="0 0 12 12"                   refX="6"                   refY="6"                   orient="auto">                  <path d="M2,2 L10,6 L2,10 L6,6 L2,2" style="fill: #000000;" />              </marker>        </defs>                   <!-- 对勾提示框 -->        <g>             <image id="djhyImg" xlink:href="" x="44%" y="8%" height="15" width="15" >            </image>        </g>                <!-- 按流程图顺序来写 -->        <rect id ="guzhangfasheng" class="unaccess" x="47%" y="1%" width="70" height="35"/>        <text class="text" x="48.5%" y="3.5%">故障发生</text>        <line class="line" x1="53%" y1="4.5%" x2="53%" y2="7%" marker-end="url(#arrow)"/>                <rect id ="dingjihuiyi" class="unaccess" x="47%" y="7.5%" width="70" height="35" onclick="clickBox(2)"/>        <text class="text" x="48.5%" y="10%" onclick="clickBox(2)">                        定级会议        </text>        <g>             <image id="dingjihuiyiImg" xlink:href="" x="44%" y="9%" height="15" width="15" >            </image>        </g>        <line x1="53%" y1="11%" x2="53%" y2="13%" class="disappear"/>         <line x1="65%" y1="13%" x2="65%" y2="14.5%" class="disappear" marker-end="url(#arrow)"/>        <line x1="15%" y1="13%" x2="65%" y2="13%" class="disappear"/>        <line id="yuan01" x1="63%" y1="13%" x2="90%" y2="13%" class="disappear"/>        <line x1="15%" y1="13%" x2="15%" y2="14.5%" class="disappear" marker-end="url(#arrow)"/>        <line id="yuan02" x1="90%" y1="13%" x2="90%" y2="14.5%" class="disappear" marker-end="url(#arrow)"/>        <line id="yuan03" x1="90%" y1="18.5%" x2="90%" y2="71%" class="disappear"/>         <rect id ="paichahui" class="disappear" x="10%" y="15%" width="70" height="35" onclick="clickBox(11)"/>        <text class="disappear" x="12.5%" y="17%" onclick="clickBox(11)">排查会</text>        <g>             <image id="paichahuiImg" xlink:href="" x="7%" y="16%" height="15" width="15" >            </image>        </g>        <rect id ="tongbaohuiyi" class="disappear" x="58.5%" y="15%" width="70" height="35" onclick="clickBox(4)"/>        <text class="disappear" x="60%" y="17%" onclick="clickBox(4)">通报会议</text>        <g>             <image id="tongbaohuiyiImg" xlink:href="" x="55.5%" y="16%" height="15" width="15" >            </image>        </g>        <rect id ="yingjiyuan" class="disappear" x="83%" y="15%" width="70" height="35" onclick="clickBox(3)"/>        <text id ="yingjitext" class="disappear" x="83.5%" y="17%" style="font-size:8pt" onclick="clickBox(3)">执行应急预案</text>        <g>             <image id="yingjiyuanImg" xlink:href="" x="80%" y="16%" height="15" width="15" >            </image>        </g>         <line x1="15%" y1="18.5%" x2="15%" y2="20.5%" class="disappear"/>        <line x1="15%" y1="20.5%" x2="5%" y2="20.5%" class="disappear"/>        <line x1="15%" y1="20.5%" x2="25%" y2="20.5%" class="disappear"/>        <line x1="5%" y1="20.5%" x2="5%" y2="23.5%" class="disappear" marker-end="url(#arrow)"/>        <line x1="25%" y1="20.5%" x2="25%" y2="23.5%" class="disappear" marker-end="url(#arrow)"/>        <line x1="65%" y1="18.5%" x2="65%" y2="21%" class="disappear" marker-end="url(#arrow)"/>         <rect id ="ganwangxianchang" class="disappear" x="0%" y="24%" width="60" height="35" onclick="clickBox(12)"/>        <text class="disappear" x="1%" y="26%" onclick="clickBox(12)">赶往现场</text>         <g>             <image id="ganwangxianchangImg" xlink:href="" x="11%" y="25%" height="15" width="15" >            </image>        </g>                <rect id ="vpn" class="disappear" x="19%" y="24%" width="60" height="35" onclick="clickBox(13)"/>        <text class="disappear" x="22%" y="26%" onclick="clickBox(13)">Vpn</text>        <g>             <image id="vpnImg" xlink:href="" x="30%" y="25%" height="15" width="15" >            </image>        </g>        <rect id ="huibaoqingkuang" class="disappear" x="58.5%" y="21.5%" width="70" height="35" onclick="clickBox(5)"/>        <text class="disappear" x="60%" y="23.5%" onclick="clickBox(5)">汇报情况</text>        <g>             <image id="huibaoqingkuangImg" xlink:href="" x="55.5%" y="22.5%" height="15" width="15" >            </image>        </g>        <line x1="65%" y1="25%" x2="65%" y2="27.5%" class="disappear" marker-end="url(#arrow)"/>        <rect id ="kefuhuashu" class="disappear" x="58.5%" y="28%" width="70" height="35" onclick="clickBox(6)"/>        <text class="disappear" x="60%" y="30%" onclick="clickBox(6)">客服话术</text>        <g>             <image id="kefuhuashuImg" xlink:href="" x="55.5%" y="29%" height="15" width="15" >            </image>        </g>        <line x1="5%" y1="27.5%" x2="5%" y2="30.5%" class="disappear"/>        <line x1="25%" y1="27.5%" x2="25%" y2="30.5%" class="disappear"/>        <line x1="5%" y1="30.5%" x2="25%" y2="30.5%" class="disappear"/>        <line x1="15%" y1="30.5%" x2="15%" y2="34.5%" class="disappear" marker-end="url(#arrow)"/>        <line x1="65%" y1="31.5%" x2="65%" y2="34.5%" class="disappear" marker-end="url(#arrow)"/>         <rect id ="yuanyinpaicha" class="disappear" x="9%" y="35%" width="60" height="380" onclick="clickBox(14)"/>        <text class="disappear" x="9.5%" y="54%" onclick="clickBox(14)">原因排查</text>         <g>             <image id="yuanyinpaichaImg" xlink:href="" x="6%" y="52.5%" height="15" width="15" >            </image>        </g>        <rect id ="gaoguanqueren" class="disappear" x="58.5%" y="35%" width="70" height="35" onclick="clickBox(7)"/>        <text class="disappear" x="59%" y="37%" style="font-size:8pt" onclick="clickBox(7)">高管确认话术</text>         <g>             <image id="gaoguanquerenImg" xlink:href="" x="55.5%" y="36%" height="15" width="15" >            </image>        </g>        <line x1="65%" y1="38.5%" x2="65%" y2="42.5%" class="disappear" marker-end="url(#arrow)"/>        <line x1="52%" y1="40.5%" x2="78%" y2="40.5%" class="disappear"/>        <line x1="52%" y1="40.5%" x2="52%" y2="42.5%" class="disappear" marker-end="url(#arrow)"/>        <line x1="78%" y1="40.5%" x2="78%" y2="42.5%" class="disappear" marker-end="url(#arrow)"/>         <rect id ="tongbaozhongxin" class="disappear" x="44.5%" y="43%" width="70" height="35" onclick="clickBox(8)"/>        <text class="disappear" x="46%" y="45%" onclick="clickBox(8)">通报中心</text>         <g>             <image id="tongbaozhongxinImg" xlink:href="" x="41.5%" y="44%" height="15" width="15" >            </image>        </g>        <rect id ="tongbaochushi" class="disappear" x="58.5%" y="43%" width="70" height="35" onclick="clickBox(9)"/>        <text class="disappear" x="60%" y="45%" onclick="clickBox(9)">通报处室</text>         <g>             <image id="tongbaochushiImg" xlink:href="" x="57%" y="44%" height="15" width="15" >            </image>        </g>        <rect id ="xiangguangongsi" class="disappear" x="72.5%" y="43%" width="70" height="35" onclick="clickBox(10)"/>        <text class="disappear" x="74%" y="45%" onclick="clickBox(10)">相关公司</text>         <g>             <image id="xiangguangongsiImg" xlink:href="" x="71%" y="44%" height="15" width="15" >            </image>        </g>         <rect id ="fanganqueding" class="disappear" x="27%" y="38%" width="70" height="35" onclick="clickBox(15)"/>        <text class="disappear" x="28.5%" y="40%" onclick="clickBox(15)">方案确定</text>         <g>             <image id="fanganquedingImg" xlink:href="" x="24%" y="39%" height="15" width="15" >            </image>        </g>        <rect id ="tijiaoshenpi" class="disappear" x="27%" y="49%" width="70" height="35" onclick="clickBox(16)"/>        <text class="disappear" x="28.5%" y="51%" onclick="clickBox(16)">提交审批</text>         <g>             <image id="tijiaoshenpiImg" xlink:href="" x="24%" y="50%" height="15" width="15" >            </image>        </g>        <rect id ="juecerenpi" class="disappear" x="47%" y="55%" width="72" height="35" onclick="clickBox(17)"/>        <text class="disappear" x="47.5%" y="57%" onclick="clickBox(17)">决策人批准</text>         <g>             <image id="juecerenpiImg" xlink:href="" x="44%" y="56%" height="15" width="15" >            </image>        </g>        <rect id ="zhixingfangan" class="disappear" x="27%" y="62%" width="70" height="35" onclick="clickBox(18)"/>        <text class="disappear" x="27.5%" y="64%" style="font-size:8pt" onclick="clickBox(18)">执行解决方案</text>         <g>             <image id="zhixingfanganImg" xlink:href="" x="24%" y="63%" height="15" width="15" >            </image>        </g>        <line x1="20%" y1="53.5%" x2="23%" y2="53.5%" class="disappear"/>        <line x1="23%" y1="53.5%" x2="23%" y2="36%" class="disappear"/>        <line x1="23%" y1="36%" x2="33%" y2="36%" class="disappear"/>        <line x1="33%" y1="36%" x2="33%" y2="37.5%" class="disappear" marker-end="url(#arrow)"/>        <line x1="33%" y1="41.5%" x2="33%" y2="48.5%" class="disappear" marker-end="url(#arrow)"/>        <line x1="33%" y1="52.5%" x2="33%" y2="53.5%" class="disappear"/>        <line x1="33%" y1="53.5%" x2="53%" y2="53.5%" class="disappear"/>        <line x1="53%" y1="53.5%" x2="53%" y2="54.5%" class="disappear" marker-end="url(#arrow)"/>        <line x1="53%" y1="58.5%" x2="53%" y2="64%" class="disappear"/>        <line x1="53%" y1="64%" x2="40.5%" y2="64%" class="disappear" marker-end="url(#arrow)"/>        <line x1="33%" y1="65.5%" x2="33%" y2="68.5%" class="disappear" marker-end="url(#arrow)"/>         <rect id ="querenhuifu" class="disappear" x="27%" y="69%" width="70" height="35" onclick="clickBox(19)"/>        <text class="disappear" x="28.5%" y="71%" onclick="clickBox(19)">确认恢复</text>        <g>             <image id="querenhuifuImg" xlink:href="" x="24%" y="70%" height="15" width="15" >            </image>        </g>        <line id="yuan04" x1="90%" y1="71%" x2="40.5%" y2="71%" class="disappear" marker-end="url(#arrow)"/>        <line x1="33%" y1="72.5%" x2="33%" y2="76%" class="disappear"/>        <line x1="33%" y1="76%" x2="53%" y2="76%" class="disappear"/>        <line x1="53%" y1="76%" x2="53%" y2="77%" class="disappear" marker-end="url(#arrow)"/>         <rect id ="huibao" class="disappear" x="47%" y="77.5%" width="70" height="35" onclick="clickBox(20)"/>        <text class="disappear" x="50.5%" y="79.7%" onclick="clickBox(20)">汇报</text>         <g>             <image id="huibaoImg" xlink:href="" x="44%" y="78.5%" height="15" width="15" >            </image>        </g>        <line x1="53%" y1="81%" x2="53%" y2="86%" class="disappear" marker-end="url(#arrow)"/>        <line x1="39%" y1="83.5%" x2="69%" y2="83.5%" class="disappear"/>        <line x1="39%" y1="83.5%" x2="39%" y2="86%" class="disappear" marker-end="url(#arrow)"/>        <line x1="69%" y1="83.5%" x2="69%" y2="86%" class="disappear" marker-end="url(#arrow)"/>         <rect id ="tongbaozhongxin2" class="disappear" x="32.5%" y="86.5%" width="70" height="35" onclick="clickBox(21)"/>        <text class="disappear" x="34%" y="88.5%" onclick="clickBox(21)">通报中心</text>         <g>             <image id="tongbaozhongxin2Img" xlink:href="" x="29.5%" y="87.5%" height="15" width="15" >            </image>        </g>        <rect id ="tongbaochushi2" class="disappear" x="47%" y="86.5%" width="70" height="35" onclick="clickBox(22)"/>        <text class="disappear" x="48.5%" y="88.5%" onclick="clickBox(22)">通报处室</text>         <g>             <image id="tongbaochushi2Img" xlink:href="" x="45%" y="87.5%" height="15" width="15" >            </image>        </g>        <rect id ="xiangguangongsi2" class="disappear" x="61.5%" y="86.5%" width="70" height="35" onclick="clickBox(23)"/>        <text class="disappear" x="63%" y="88.5%" onclick="clickBox(23)">相关公司</text>        <g>             <image id="xiangguangongsi2Img" xlink:href="" x="60%" y="87.5%" height="15" width="15" >            </image>        </g>        <line x1="39%" y1="90%" x2="39%" y2="92.5%" class="disappear"/>        <line x1="53%" y1="90%" x2="53%" y2="95%" class="disappear" marker-end="url(#arrow)"/>        <line x1="69%" y1="90%" x2="69%" y2="92.5%" class="disappear"/>        <line x1="39%" y1="92.5%" x2="69%" y2="92.5%" class="disappear"/>          <rect id ="jieshu" class="disappear" x="47%" y="95.5%" width="70" height="35"/>        <text class="disappear" x="50.5%" y="97.5%">结束</text>            </svg>