Estoy trabajando en un editor de avatar súper simplificado.
Quiero que el usuario pueda arrastrar y soltar un memoji sobre un fondo y mostrar el resultado (luego lo haré descargable)
Uso un svg como contenedor principal y uso un elemento para mostrar el png de fondo. Al soltar una imagen, obtengo una representación de URL de datos de la imagen soltada y la configuro como href de un nuevo elemento <image> . Desafortunadamente, este elemento nunca aparece en la pantalla, aunque está allí cuando inspecciono mi elemento svg con las herramientas de desarrollo. ¿Cómo hacer que el elemento creado dinámicamente se muestre en mi svg?
<!DOCTYPE html> <html lang="en"> <body> <svg id="canvas" width="800px" height="800px" > <image href="https://cdn.glitch.com/f408a86f-811f-4c06-8c4b-86f559d391b1%2Fbackground.png?v=1631718789960" height="800px" width="800px"/> </svg> <script> const canvas = document.getElementById("canvas"); // Image file reader const reader = new FileReader(); reader.onload = function() { const memojiImage = document.createElement("image"); memojiImage.setAttribute("href", reader.result); memojiImage.setAttribute("height", "844px"); memojiImage.setAttribute("width", "844px"); canvas.appendChild(memojiImage); }; // Drag and drop const preventDefault = e => { e.preventDefault(); e.stopPropagation(); }; canvas.addEventListener("dragenter", preventDefault, false); canvas.addEventListener("dragleave", preventDefault, false); canvas.addEventListener("dragover", preventDefault, false); canvas.addEventListener("drop", preventDefault, false); canvas.addEventListener("drop", e => { const file = e.dataTransfer.files[0]; reader.readAsDataURL(file); }); </script> </body> </html>