Question

Say I want to programmatically insert an additional <tspan> in 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 with, among other things, pure JavaScript (.appendChild), jQuery (.append), and d3.js (.append). However, although all three methods successfully insert the element, I can only seem to get it to actually display when it's inserted by d3.js:

See reduced case in this fiddle: http://jsfiddle.net/2NLJY/.

The behaviour is consistent across the browsers I've tested: Firefox, Chrome, and Safari (all OS X 10.8).

What is going on here?

Was it helpful?

Solution

You can't 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 which adds functionality to jquery allowing svg elements to be created.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top