Svg text is not working in safari and IE however it work's fine with chrome and firefox

Question

 text[i + 1] = document.createElementNS("http://www.w3.org/2000/svg", "text");
            text[i + 1].setAttribute('x', legendX[i + 1] - 15);
            text[i + 1].setAttribute('y', legendY[i + 1] + 30);
            text[i + 1].setAttribute('style', "fill;red");
            text[i + 1].id = "text" + (i + 1);
            svgmain.appendChild(text[i + 1]);
            document.getElementById(text[i + 1].id).innerHTML = yearAllTimelineDates[i + 1][1].toString().substring(0, 4);

// So I am using innerHTML property to set the text value

Answer 1

Use this,

document.getElementById(text[i + 1].id).textContent= yearAllTimelineDates[i + 1][1].toString().substring(0, 4);