[交互式SVG组件]Multi-line text box

One feature that I know a lot of people, myself included, would 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 should 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" οnlοad="create_multiline(evt, 280)">Alice was beginning...</text>
<text x="160" y="155" οnlοad="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