svg标签中利用＜polygon/＞循环数组绘制多边形

背景：在页面上需要循环数组（坐标）画矩形，实现左右对于矩形边框的联动，效果可参考：null通过领先的深度学习技术，对各种表格，图片，文档、证件、面单等多种通用场景、多种语言的文字进行快速、精准的检测和识别，适用于印刷体、手写体、倾斜、折叠、旋转等场景的通用文本识别 、通用文字识别。当前支持52种语言包括简体中文、繁体中文、日语、韩语、英语、法语、葡萄牙语、德语、意大利语、荷兰语、瑞典语、芬兰语、丹麦语、挪威语、匈牙利语、越南语、南非语、阿尔巴尼亚语、巴斯克语、加泰罗尼亚语、克罗地亚语、捷克语、爱沙尼亚语、冰岛语、爱尔兰语、拉丁语、拉脱维亚语、立陶宛语、马来语、波兰语、罗马尼亚语、斯洛伐克文语、斯洛文尼亚语、斯瓦希里语、土耳其语、威尔士语、马耳他语、克里奥尔语、加利西亚语、世界语、菲律宾语、印度尼西亚语、阿塞拜疆语、西班牙语、俄语、保加利亚语、马其顿语、乌克兰语、塞尔维亚语、白俄罗斯语、希腊语、亚美尼亚语。https://www.textin.com/experience/text_recognize_3d1

 1、将所有循环的坐标存在数组里，因为我们要画矩形，所以每个数组里面的坐标点应该有八个，几循环数组的形式:【 [x1 y1,x2 y2,x3 y3,x4 y4],[x1 y1,x2 y2,x3 y3,x4 y4],[x1 y1,x2 y2,x3 y3,x4 y4]......】；

2、代码： 数组 ratioPositionArr即为上面形式；

//将后端返回来的数据做处理：将每个数组里面的坐标等比例放大缩小，再存在一个新数组中。
    locationsPosition(newVal, oldVal) {
      this.activeIfSvg = ''
      this.ratioPositionArr = []
      // console.log(77, newVal)
      // this.ratioPositionArr=newVal
      const itemArr = []
      this.eryArr = []
      // console.log('eryArr', this.ratioWidth)
      newVal.forEach((item, index) => {
        item.forEach(itemevery => {
          this.eryArr.push(itemevery / this.ratioWidth)
        })
        itemArr.push(this.eryArr)
        this.eryArr = []
      })
      // console.log('itemArr', itemArr)
      this.ratioPositionArr = itemArr
      // console.log('99',this.ratioPositionArr)
    },

    <div
            id="svgbox"
            class="svgbox"
            style="border: 2px solid white"
            ref="svgcanvas"
            @mousedown="move"
          >
            <svg
              class="svgelement"
              style="width: 100%; height: 100%; border: 1px solid white"
              ref="svgcanvas"
            >
              <polygon
                v-for="(item, index) in ratioPositionArr"
                :points="item"
                :key="index"
                :class="activeIfSvg === index ? 'activeIfSvg' : ''"
                @click="getClickSvg(index)"
              ></polygon>
            </svg>
          </div>

3、最终效果：蓝色边框即为 svg---polygon--points  根据数组中的坐标画出的多边形！