canvas或svg怎么在移动端应用

Question

动态给红球连线应该怎么连，想了三天都没想出来

用svg或者canvas就是确定不了坐标

用svg时的代码：
<div class="wan_table_3" style="position:relative;">

                <table>
                  <tbody>
                      <tr v-for="(items, indexs) in wan_data_list">
                          <td v-for="(item,index) in items">
                            <span v-if=" item == 0" style="background:red;color:#fff;" :id="'T_' + indexs + '_' + index">
                              {{item == 0 ? index : item }}
                            </span>
                            <span v-else v-show="isShow_Wan_list_data">  {{item}} </span>
                          </td>
                      </tr>
                  </tbody>
                </table>  
                <!-- <div id="canvasdiv"></div> -->
                <svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="my_canvas" style="width:100%;height:100%;position:absolute;top:0;left:0;" preserveAspectRatio="xMaxYMax meet" viewBox="0 0 400 4500" >
                    <polyline id="polyline" points="0,0 20,20 30,30 100,100"
                      style="fill:none;stroke:red;stroke-width:1"/>
               </svg>
            </div>
            

数据格式是这样的：

要怎么样才能确定坐标呢？