I am creating SVG elements via JavaScript, and it works fine, but when I create an text SVG element and define it's content, the browser just don't render the value, despite the value is in the code when I inspect it with firebug.

The code is:

var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');

svg.setAttribute('xlink','http://www.w3.org/1999/xlink');

svg.setAttribute('width','187');

svg.setAttribute('height','234');



var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');

rect.setAttribute('width','187');

rect.setAttribute('height','234');

rect.setAttribute('fill','#fff');

rect.setAttribute('stroke','#000');

rect.setAttribute('stroke-width','2');

rect.setAttribute('rx','7');



var text = document.createElementNS('ttp://www.w3.org/2000/svg', 'text');

text.setAttribute('x', '10');

text.setAttribute('y', '20');

text.setAttribute('fill', '#000');

text.textContent = '2';



svg.appendChild(rect);

svg.appendChild(text); 



var wp = document.getElementById('wrapper'); 

wp.appendChild(svg);

Here is the jsfiddle link.
If you inspect the SVG you will see the value of the text element there, but the browser doesn't render it.

Thanks