SVG Text Manipulation with JavaScript

[Igor Simoes]

Hi All,

I am creating a custom chart using SVG and I am having problems while dealing with text on IE. I have the SVG file being loaded through an EMBED tag and I can access it through JavaScript. This is a line chart and the lines are being positioned correctly. The problem is that I want to change the text of the scale to the values on the JavaScript, but I can't make it work on IE.

Below is the code snippet that handles this:

var newText = svg_doc.createElementNS(svgNS,"text");
    newText.setAttributeNS(null,"x",100);		
    newText.setAttributeNS(null,"y",100);	
    newText.setAttributeNS(null,"font-size","13px");
    newText.setAttributeNS(null,"text-anchor","middle");
    newText.setAttributeNS(null,"fill-opacity",Math.random());		
    var red = Math.round(Math.random() * 255);
    var green = Math.round(Math.random() * 255);
    var blue = Math.round(Math.random() * 255);
    newText.setAttributeNS(null,"fill","rgb("+ red +","+ green+","+blue+")");
    var textNode = document.createTextNode("a new text");
    newText.appendChild(textNode);

My code stops working when I call appendChild(). I have seen this working when the code is inside the SVG file. But due to restrictions on the system I am working in I have to put my code on a HTML that has the SVG on an EMBED tag.

On Firefox this would be quite simple using something like this:

    var text_el = svg_doc.getElementById('value');
    text_el.textContent = 'something';

But this construction does not work in IE. Nor it throws an error. Does anybody know of any similar way of dealing with SVG text IE?

Any help would be really appreciated,

Thanks a lot in advance,

Regards,

Igor

[gits]

you might try to set innerHTML instead of textContent ... which should work in all browsers.