Use XMLHttpRequest to read and manipulate svg graphs in vue (control dom flickering)

<template>
  <div class="this_bk">
   <div id="svgTemplate" ref="svg"></div>
  </div>
</template>

<script>
import wftSvg from "@/assets/svg/xxmap.svg";
 
export default {
data() {
    return {
      svgDom: null,
      allDom: null,
  }
},
created() {
    this. getSvg();
  },
mounted() {
// svg mouse scroll event
    window['havcZooming'] = (e) => {
      console.log(e, 'havcZooming----->>>')
      this. zoomimg();
    }
 
},
methods: {
getSvg() {
      let _this = this;
      const xhr = new XMLHttpRequest();
      xhr.open("GET", wftSvg, true);
      xhr. send();
      xhr. addEventListener("load", () => {
        const resXML = this.stringToXml(xhr.response);
        // const resXML = xhr.responseXML // this.stringToXml(xhr.responseXML)
        this.svgDom = resXML.documentElement.cloneNode(true); // clone node
 
 
        
        // Add mouse scroll zoom event for svg
        this.svgDom.setAttribute("v-on:mousewheel", "this.havcZooming($event)");
       


let gtag = this.svgDom.getElementsByTagName("g");
        gtag[0].setAttribute("id", "svgcanvas");

        /* Add events (click event, mouse wheel event, full screen event) */
        this.allDom = gtag[0];
//traverse nodes
        this.forEachNodes(gtag[0]);



 
        /* Convert svgDom object to vue's virtual dom */
        var oSerializer = new XMLSerializer();
        var sXML = oSerializer. serializeToString(this. svgDom);
        var Profile = Vue. extend({
          template: "<div>" + sXML + '</div>'
        });
        // Create an instance and attach it to the element
        new Profile().$mount('#svgTemplate');
 
 
      });
    },
 //Convert string to dom object; string to xml
    stringToXml(xmlString) {
      let xmlDoc = null
      if (typeof xmlString == "string") {
        //FF
        if (document. implementation. createDocument) {
          var parser = new DOMParser();
          xmlDoc = parser. parseFromString(xmlString, "text/xml");
        } else if (window. ActiveXObject) {
          xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
          xmlDoc. async = false;
          xmlDoc. loadXML(xmlString);
        }
      } else {
        xmlDoc = xmlString;
      }
      return xmlDoc;
    },
    zoomimg(x, y) {
      // zoom in and zoom out
      // The zoom event is bound to svg, and the zoom result is set to the g tag inside svg
      if (!x) {
        x = 0;
      }
      if (!y) {
        y = 0;
      }
      const svg = d3. select("svg");
      const g = d3. select("#svgcanvas");
      // console.log(svg, g, "in havcZooming");
      // scale the node
      function zoomActions() {
        // console.log(d3.event, '----->>>') // undefind
        // g.attr("transform", d3.event.transform);
        g.attr("transform", d3.zoomTransform(svg.node()));
      }
 
      let zoomHandler = d3.zoom().on("zoom", zoomActions).scaleExtent([0.5, 40]);
 
      // zoomHandler(svg)
      svg. call(zoomHandler);
      svg.transition().duration(750).call(zoomHandler.transform, d3.zoomIdentity.translate(-x, -y).scale(2));
       
    },
 
 
 /* dom reset */
    resetDom() {
      console.log('into resetDom')
      const svg = d3. select("svg");
      const g = d3. select("#svgcanvas");
 
      var zoom = d3.zoom().on("zoom", function () { // svg zoom in and out events
        // My svg's line, text, and other tags are all wrapped in g, so it's good to control the size of the g tag
        g.attr("transform", d3.zoomTransform(svg.node()));
      });
      svg. call(zoom);
      svg.call(zoom.transform, d3.zoomIdentity); //reset
    },
 
 forEachNodes(rootNode) {
      // console.log('rootNode', rootNode.childNodes)
      for (var i = 0; i < rootNode. childNodes. length; i ++ ) {
        if (rootNode. childNodes. item(i). nodeType != 3) {
          // console.log('rootNode.childNodes ' + i, rootNode.childNodes.item(i).getTotalLength)
          let child = rootNode. childNodes. item(i);
          let childId = child. getAttribute("id");
          if (childId) {
            child.style.cursor = 'pointer' // modify node style
            child.setAttribute("v-on:click", "this.handleClick($event, '" + childId + "')"); // bind click event for each node

            // continue

            //Get the attributes of the child elements in the SVG file and save them (backup)
            this.setSvgDoms(i);

            if (childId == 'group_1') {
              let currNode = this.svgDom.getElementById(childId)
              // console.log('into if currNode group_1', currNode.nodeName)
              currNode.style.border = '1px solid red'
              currNode.style.animation = 'twinkle 0.5s infinite alternate'
              // currNode.setAttribute("style", "animation:twinkle 0.5s infinite alternate");
              if (currNode. childNodes) {
                for (var n = 0; n < currNode.childNodes.length; n++ ) {
                  if (currNode. childNodes. item(n). nodeType != 3) {
                    let min_child = currNode.childNodes.item(n);
                    let min_childId = min_child. getAttribute("id");
                    let min_currNode = this.svgDom.getElementById(min_childId)
                    // console. log('is me ',min_currNode)
                    min_currNode.setAttribute("stroke", "#f9203a")
                    min_currNode.setAttribute("stroke-width", "2")

                  }
                }
              }
            }
           


          }


        }


      }


    },
},
</script>

<style>

.this_bk {
  width: 100%;
  height: 100%;
  /*position: relative;*/
  background: url('../../assets/img/dialog/12.jpg') repeat-x 0 0;
  background-size: 100% 100%;

  /*background-color: rgba(10, 22, 55, 0.96);*/
}


 
 
@keyframes twinkle {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }

  100% {
    opacity: 0;
  }
}

 
 
</style>