Estoy tratando de crear una forma SVG y agregarla a un elemento en mi DOM.
El siguiente JS agrega el <svg> al nodo previsto, pero no muestra un fondo morado en la página:
const svgBox = document.createElement("svg"); svgBox.setAttribute('height', 150); svgBox.setAttribute('width', 800); svgBox.setAttribute('style', 'background-color:purple;'); const div = document.getElementsByTagName('div')[0]; // this does exist div.appendChild(svgBox);Aquí hay un JSFiddle que muestra el HTML equivalente que funciona (si vuelvo a comentar la etiqueta) pero el JS anterior no funciona. He eliminado esto de un caso de uso más complejo y me he demostrado a mí mismo que me falta un principio de visualización básico crucial.
Un SVG es un elemento con espacio de nombres, por lo que debe usar createElementNS en lugar de createElement ; para comprender por qué, consulte esta respuesta
Aquí hay un ejemplo de trabajo:
const svgBox = document.createElementNS("http://www.w3.org/2000/svg", "svg"); svgBox.setAttribute('height', 150); svgBox.setAttribute('width', 800); svgBox.setAttribute('style', 'background-color:purple;'); const div = document.getElementsByTagName('div')[0]; // this does exist div.appendChild(svgBox); <div> </div>