Tengo un elemento img, su atributo src es un archivo url svg.
Puedo obtener este elemento img dom, pero quiero obtener el contenido de este archivo y no puedo usar ajax.
¡Gracias! ejemplo:
<svg> <rect> </rect> </svg>este es mi codigo
<!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>¡Esta es mi escena! No puedo usar ajax porque no puedo obtener los datos de la configuración asíncrona de 'ondragstart' en el evento 'ondrop'.
<!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>Suponiendo que es la imagen SVG que ya se muestra la que debe arrastrarse y soltarse, este podría ser un ejemplo. Es solo la identificación de la imagen la que se "transfiere" y en el evento de caída, las imágenes se recuperan utilizando el atributo src.
En la devolución de llamada de la función de búsqueda, creo un documento XML y, en este caso, solo imprimo el elemento raíz en la consola.
En este ejemplo, uso un URI de datos para la fuente de las imágenes, pero esto puede ser reemplazado por su URL a su propia imagen.
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>Dado su proyecto, parece que tendría mucho más sentido hacerlo al revés:
De esta manera, cuando comience a arrastrar sus elementos, ya tendrá su versión de marcado:
const images = document.querySelectorAll("img[data-src]"); images.forEach( async (img) => { // we store the actual src in a data- attribute // we will only fetch it from here const resp = await fetch(img.getAttribute("data-src")); const as_blob = resp.ok && await resp.blob(); // read as text to get the markup const markup = await as_blob.text(); // create a blob: URL so we can display the image const url = URL.createObjectURL(as_blob); img.src = url; // once the image is loaded we can revoke the blob: URL // this will allow the Blob to be Garbage Collected img.addEventListener("load", (evt) => URL.revokeObjectURL(url), { once: true }); img.addEventListener("dragstart", (evt) => evt.dataTransfer.setData("text/plain", markup) ); }); const div = document.getElementById("div"); div.addEventListener("dragover", (evt) => evt.preventDefault() ); div.ondrop = (evt) => { const data = evt.dataTransfer.getData('text/plain'); console.log(data); }; <img id="img" draggable="true" data-src="https://upload.wikimedia.org/wikipedia/commons/4/4a/Commons-logo.svg" width="50px" height="50px" /> <div id="div" style="background-color: #123; width: 400px; height: 300px;"></div>