Estoy tratando de usar javascript para crear un montón de elementos SVG. Tengo mucho de eso funcionando, y el siguiente código funciona todo excepto una parte ...

 function newPerkLabel (x, y, name) { var newLabel = document.createElementNS("http://www.w3.org/2000/svg", "text"); newLabel.setAttribute("font-size", "0.8em"); newLabel.setAttribute("x", x); newLabel.setAttribute("y", y+25); newLabel.setAttribute('fill', '#000'); newLabel.setAttribute("text-anchor", "middle"); newLabel.textContent = name; svgBox.appendChild(newLabel); } function newPerkLabel2 (x, y, name, parent) { var newLabel = document.createElementNS("http://www.w3.org/2000/svg", "tspan"); newLabel.setAttribute("font-size", "0.8em"); newLabel.setAttribute("x", x); newLabel.setAttribute("y", y+25); newLabel.setAttribute('fill', '#000'); newLabel.setAttribute("text-anchor", "middle"); newLabel.textContent = name; parent.appendChild(newLabel); } function drawSkillTree(skillTree) { //Get SVG area let svgBoxRect = svgBox.getBoundingClientRect(); //Run through each perk in skillTree for (let i = 0; i < activeSkillTree.perks.length; i++) { let perk = activeSkillTree.perks[i]; let curXPos = perk.xPos / 100 * svgBoxRect.width; let curYPos = perk.yPos / 100 * svgBoxRect.height; //Create perk labels let perkName = perk.name; if (perkName.indexOf('<br>') != -1) { let perkNameLines = perkName.split('<br>'); let line1 = newPerkLabel(curXPos, curYPos, perkNameLines[0]); newPerkLabel2(curXPos, curYPos, perkNameLines[1], line1); } else { newPerkLabel(curXPos, curYPos, perkName); } }

}

Estoy tratando de tener la opción de agregar saltos de línea, y para hacerlo, necesito un elemento <tspan> en el elemento svg <text> . ¿Cómo haría para hacer eso?