Drawing polygons with ＜ polygon / > circular array in SVG tag

background ： You need a circular array on the page （ coordinate ） Draw a rectangular , Realize the linkage of left and right rectangular borders , The effect can be referred to ：null Through leading in-depth learning technology , For various forms , picture , file 、 certificates 、 A variety of general scenes such as face sheet 、 Multi lingual text for fast 、 Accurate detection and identification , Suitable for printing 、 Handwriting 、 tilt 、 Fold 、 General text recognition for scenes such as rotation 、 General character recognition . The current support 52 Languages include simplified Chinese 、 Traditional Chinese 、 Japanese 、 Korean 、 English 、 French 、 Portuguese 、 German 、 Italian 、 Dutch 、 Swedish language 、 Finnish language 、 Danish language 、 Norwegian 、 Hungarian 、 Vietnamese 、 South African 、 albanian 、 Basque 、 Catalan 、 Croatian 、 Czech 、 Estonian 、 Icelandic 、 irish 、 Latin 、 Latvian 、 Lithuanian 、 Malay Language 、 Polish language 、 romanian 、 Slovak 、 Slovenian 、 Swahili 、 Turkish language 、 Welsh 、 Maltese 、 Creole 、 Galician 、 Esperanto 、 Filipino 、 Indonesian 、 Azerbaijani 、 Spanish 、 Russian 、 Bulgarian 、 Macedonian 、 Ukrainian 、 Serbian 、 Belarusian 、 Greek 、 Armenian .https://www.textin.com/experience/text_recognize_3d1

 1、 Store the coordinates of all loops in the array , Because we want to draw a rectangle , So there should be eight coordinate points in each array , In the form of several circular arrays :【 [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、 Code ： Array ratioPositionArr That is, the above form ;

// Process the data returned from the back end ： The coordinates in each array are scaled up and down , In a new array .
    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、 Final effect ： The blue border is svg---polygon--points  A polygon drawn according to the coordinates in the array ！