Creé esta pregunta para encontrar rápidamente esta solución específica, pero supongo que la respuesta es la misma para este tipo de problema.

Problema

Creé un SVG desde el DOM y quería agregarlo al cuerpo (o en cualquier lugar), pero no podía verlo en la web, incluso cuando podía encontrarlo en el árbol DOM en la consola y si copiaba el elemento de la consola y pegado en el HTML que me estaba dando el resultado esperado.

Solución

Estaba usando document.createElement en lugar de document.createElementNS para crear mi SVG.

Este segundo crea un elemento con el URI de espacio de nombres especificado y el nombre completo.

Vea la respuesta principal aquí:

Agregar elemento SVG a SVG existente usando DOM

 // Get the references that you want to copy const svg1 = document.getElementById('svg1'); const path1 = document.getElementById('path1'); //Here I was using: document.createElement('svg') instead of this: const svg2 = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); // Set some svg attributes svg2.id = 'svg2'; svg2.setAttribute('viewBox','0 0 1200 1200'); // Clone the original path and append to the new svg const cpath2 = path1.cloneNode(); cpath2.id = 'cpath2'; svg2.appendChild(cpath2); // Finally append created svg to wherever you want document.body.appendChild(svg2);

PD: sobre copiar desde un SVG existente:

• Estoy seguro de que hay muchas formas de hacer lo mismo, pero en este caso, estoy usando JS puro para algunos SVG.
• En el enlace al hilo que escribí anteriormente, hay una respuesta que recomienda usar la biblioteca d3 para administrar SVG.
• Como dicen los documentos:Advertencia: cloneNode() puede dar lugar a ID de elementos duplicados en un documento. y el nombre también podría duplicarse.