SVG text element with space not saved in IE

Question

I want to save empty space in one SVG <text>.

This works fine with the xml: space = "save" attribute on a text element in all browsers except IE.

<text x="0" y="15" fill="red" xml:space="preserve">I love SVG!</text> 

Here is jsfiddle, try opening this script in Chrome / Firefox and in the latest IE, note that the spaces in the text of the text element are not saved in IE.

jsfiddle

Any workaround, so does this work in IE too?

Answer 1

I think you could replace each space with   (this is the unicode character of a non-breaking space ).

In javascript, it will be written as \ u00A0, though.

Answer 2

If you use d3, this works well:

 .attr("style","white-space:pre")