Why aren't SVG <tspan> programmable elements drawn except with d3.js?

Question

Let's say I want to programmatically insert an extra <tspan> into the <text> element in the following SVG:

 <svg width="300" height="500"> <text x="50" y="100"> <tspan x="50">one</tspan> <tspan x="50" dy="20">two</tspan> <tspan x="50" dy="20">three</tspan> </text> </svg> 

This can be done, in particular, using pure JavaScript ( .appendChild ), jQuery ( .append ) and d3.js ( .append ). However, despite the fact that all three methods successfully insert an element, I can show that it actually displays when it is inserted by d3.js:

See the above case in this script: http://jsfiddle.net/2NLJY/ .

The behavior is consistent in the browsers I tested: Firefox, Chrome, and Safari (all OS X 10.8).

What's going on here?

Answer 1

You cannot use createElement to create SVG elements. SVG elements must be created in the SVG namespace, so you need to write

 document.createElementNS("http://www.w3.org/2000/svg", "tspan"); 

There is a jquery plugin that adds jquery functions that allow you to create svg elements.