Estoy haciendo un gráfico usando un elemento <svg> . Algunos datos deben agregarse dinámicamente con Javascript. Obtuve una versión simplificada de mi problema aquí en JsFiddle .

Lo que estoy haciendo es obtener un elemento por su id . Luego creo el nuevo elemento de texto y establezco los attributes y el innerHTML . Por último, lo estoy agregando a <svg> .

Lo extraño es que cuando inspecciono el elemento svg en la consola, parece que el elemento que se agrega con Javascript está allí. Sin embargo, no es visible en la pantalla:

Mi código:

HTML

 <svg> <g id="x_label"> <text x="20" y="20">asd</text> </g> </svg>

JavaScript:

 window.onload = () => { printChart() } function printChart() { let xLabel = document.getElementById('x_label') let newLabel = document.createElement("text") newLabel.setAttribute("x", "20") newLabel.setAttribute("y", "40"); newLabel.innerHTML = "new label" xLabel.appendChild(newLabel) }