'I want to get file content by img element isn't async, (src is svg)

I have a img element , his src attribute is a svg url file.
I can get this img dom element, but I want to get this file content, and can't use ajax.
thanks! example:

<svg>
<rect> </rect>
</svg>

this is my code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img id="testImg" src="logo.svg" alt="">

    <script>
        const img = document.getElementById('testImg');

        console.log('img', [img]);
    </script>
</body>
</html>

This is my scene！ I can't use ajax because I can't get the data of the asynchronous setting of 'ondragstart' in the 'ondrop' event.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <img id="img" draggable="true" src="logo.png" width="50px" height="50px" />

    <div
      id="div"
      style="background-color: #123; width: 400px; height: 300px;"
    ></div>
    <script>
      const img = document.getElementById('img');
      img.addEventListener('dragstart', function(e) {
        const src = e.target.src;
        console.log(src);

        axios.get(src).then(function(res) {
          console.log(res.data);
          e.dataTransfer.setData('text/plain', res.data);
        });

      });

      const div = document.getElementById('div');
      div.addEventListener('dragover', function(e) {
        e.preventDefault();
      });
      div.ondrop = function(e) {
        const data = e.dataTransfer.getData('text/plain');
        console.log(data);
      };
    </script>
  </body>
</html>
javascripthtmlsvg


Solution 1:[1]

Assuming that it is the already displayed SVG image that needs to be dragged and dropped this could be an example. It is only the id of the image that is "transferred" and on the drop event the images is fetched using the src attribute.

In the callback of the fetch function I create a XML document and in this case just print out the root element in the console.

In this example I use a data URI for the images source, but this can just be replaced by your URL to your own image.

const img = document.getElementById('img');
img.addEventListener('dragstart', function(e) {
  const id = e.target.id;
  e.dataTransfer.setData('text/plain', id);
});

const div = document.getElementById('div');

div.addEventListener('dragover', function(e) {
  e.preventDefault();
});

div.addEventListener('drop', function(e) {
  e.preventDefault();
  const id = e.dataTransfer.getData('text/plain');
  
  let img = document.getElementById(id);
  
  fetch(img.src).then(res => res.text()).then(text => {
    let parser = new DOMParser();
    let svg = parser.parseFromString(text, "text/xml");
    console.log(svg.rootElement.outerHTML);
  });
  
});
<img id="img" draggable="true" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDIgMiIgd2lkdGg9IjUwIiBoZWlnaHQ9IjUwIj48Y2lyY2xlIHI9IjEiIGN4PSIxIiBjeT0iMSIgZmlsbD0icmVkIi8+PC9zdmc+" width="50px" height="50px"/>
<div id="div" style="background-color: #123; width: 400px; height: 300px;"></div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions