jQuery: write html symbols in SVG tspan

Question

I'm trying to write HTML symbols (like °) in a TSPAN element with jQuery. In a simple SPAN it's easy:

$('#span_id').html('°');

With the TSPAN this way doesn't work, if I use

$('#tspan_id').html('°');

nothing is printed out.

With

$('#tspan_id').text('°');

° is printed instead of ° (obviously)

Look at the JSFiddle

How can I do?

Answer 1

You can use the .append() function for this

$('#tspan_id').empty().append('°');

FIDDLE

Answer 2

SVG Nodes don't have a innerHTML property as they are not HTML, and that means they can't be set with jQuery's html() method.

Using entities is therefore out of the question, but you can convert them before inserting them:

var txt = $('<div />').html('&deg;').text();
$('#tspan_id').text(txt);

FIDDLE