Menu
I want to preserve the white space in a single SVG < text> element.
This works fine with xml:space="preserve" attribute in the text element in all but IE browser.
<text x="0" y="15" fill="red" xml:space="preserve">I love SVG!</text>
Here is the jsfiddle, try to open this fiddle in Chrome/Firefox and in latest IE, notice that whitespace in the text element text is not preserved in IE.
jsfiddle
Any workaround so that this works in IE as well?
870
But most importantly, what's the best way to make SVG text editable? document. getElementById("element"). contentEditable = "true"; You can also use the ref contenteditable="true" in an HTML element like so: <div contenteditable="true"> .
The SVG <text> element draws a graphics element consisting of text. It's possible to apply a gradient, pattern, clipping path, mask, or filter to <text> , like any other SVG graphics element. If text is included in SVG not inside of a <text> element, it is not rendered.
The xml:space attribute is an XML-defined attribute that declares the significant white-space processing behavior within an object element. This behavior is relevant for all content (inner text) contained within the element where xml:space is declared, and also scopes to child elements.
white-space is a CSS property that helps control how whitespace and line breaks within an element's text are treated. The white-space property can take these values: normal : The default value. Multiple whitespaces are collapsed into one. The text wraps to the next line when needed.
I guess you could replace each space by   (that's the unicode non-breaking space character).
In javascript it would be written as \u00A0 though.
106
If you are using d3 this works well:
.attr("style","white-space:pre")
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
