[Interactive SVG component] multi-line text box

One feature that I know a lot of people, myself defined ded, wocould like in SVG is a multi-line text box, so I 've made one. you can see the result below and download the file at the bottom of the page. in Chrome, at least, you shoshould see two multi-line Blocks
Of text and two rectangles of empty space. In
Firefox or a program like inkscape you will see two long lines of text. I'm trying to find a simple way to get it to work in Firefox.

The SVG contains two texts element like this:

<text x="5" y="20" onload="create_multiline(evt, 280)">Alice was beginning...</text><text x="160" y="155" onload="create_multiline(evt, 200)">So she was considering...</text>

 

As you can see, both elements call a function called create_multiline () when they load (which is what Firefox doesn't do ). the parameters passed are EVT, which allows the function to know which element called it, and a number which
Defines the width of the box.

The createmultiline function does the following:

Split text at spaces to get an array of words

var words = text_element.firstChild.data.split(' ');

Remove the words from the original text element

text_element.firstChild.data = '';

Add a tspan element containing the first word to the text element

var tspan_element = document.createElementNS(svgNS, "tspan");var text_node = document.createTextNode(words[0]);tspan_element.appendChild(text_node);text_element.appendChild(tspan_element);

Add words to the tspan element one by one

for(var i=1; i<words.length; i++) {    tspan_element.firstChild.data += " " + words[i];

If the width is exceeded...

if (tspan_element.getComputedTextLength() > width) {

Remove the previous word

tspan_element.firstChild.data = tspan_element.firstChild.data.slice(0, len);

Add a new tspan element with that word

var tspan_element = document.createElementNS(svgNS, "tspan");tspan_element.setAttributeNS(null, "x", start_x);tspan_element.setAttributeNS(null, "dy", 18);text_node = document.createTextNode(words[i]);tspan_element.appendChild(text_node);text_element.appendChild(tspan_element);

 

Start adding words one by one again (continue loop ).

 

Attachment	Size

 

Attachment	Size
Multiline_text.svg	2.6 KB

 

 

Http://www.petercollingridge.co.uk/interactive-svg-components/multi-line-text-box