Question

65

SVG: using getComputedTextLength to wrap text

rated 0 times [ 71] [ 6] / answers: 1 / hits: 31419 / 13 Years ago, fri, august 12, 2011, 12:00:00

I'm trying to wrap text by building up a text string, and using getComputedTextLength to find out when the text goes beyond the allowed width. However, I can't find a simple way to incrementally build up the text which will work with getComputedTextLength.

The general idea is:

  str = svgDocument.createTextNode(myText[word]); // first word on new line

  word++;

  obj = text.cloneNode(true);                     // new text element for this line

  obj.appendChild(str);

  svgDocument.documentElement.appendChild(obj);   // reqd for getComputedTextLength?

  for( ; word < myText.length; word++) {

     next_width = obj.getComputedTextLength();    // get current line width

     if(next_width >= extent)

        break;

     str +=  ;                                  // add next word to the line

     str += myText[word];

     ...

  }

Can anyone tell me how to get this to work? Presumably str is copied rather than referenced in obj, but I've also tried putting obj.removeChild(str) and obj.appendChild(str) in the loop, but the appendChild crashes. I've also tried various combinations of moving around the documentElement.appendChild, and removing obj and re-appending it, and so on.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

raymondd

Add To Favorites

Follow

Total Points: 620

Total Questions: 112

Total Answers: 94

Location: Namibia

Member since Mon, Feb 21, 2022

2 Years ago

raymondd questions

1 Automatically adjust height of iframe using React Hooks

Thu, Apr 22, 21, 00:00, 3 Years ago

1 What's the proper location to store images in VueJS - public folder or assets folder?

Sat, Jul 11, 20, 00:00, 4 Years ago

1 Convert binary to blob url

Thu, Jul 9, 20, 00:00, 4 Years ago

1 Show Loading indicator on Bootstrap 4 (Modal) dialog

Thu, Apr 9, 20, 00:00, 4 Years ago

1 Script injected with insertAdjacentHTML() does not execute

Thu, Jul 25, 19, 00:00, 5 Years ago

View All

answered 13 Years ago jacie · Accepted Answer

This should work:

    var svgNS = http://www.w3.org/2000/svg;

    var width = 200;



    function init(evt)

    {

        if ( window.svgDocument == null ) {

            svgDocument = evt.target.ownerDocument;

        }

        create_multiline(Whatever text you want here.);

    }



    function create_multiline(text) {

        var words = text.split(' ');                        

        var text_element = svgDocument.getElementById('multiline-text');

        var tspan_element = document.createElementNS(svgNS, tspan);   // Create first tspan element

        var text_node = svgDocument.createTextNode(words[0]);           // Create text in tspan element



        tspan_element.appendChild(text_node);                           // Add tspan element to DOM

        text_element.appendChild(tspan_element);                        // Add text to tspan element



        for(var i=1; i<words.length; i++)

        {

            var len = tspan_element.firstChild.data.length;             // Find number of letters in string

            tspan_element.firstChild.data +=   + words[i];            // Add next word



            if (tspan_element.getComputedTextLength() > width)

            {

                tspan_element.firstChild.data = tspan_element.firstChild.data.slice(0, len);    // Remove added word



                var tspan_element = document.createElementNS(svgNS, tspan);       // Create new tspan element

                tspan_element.setAttributeNS(null, x, 10);

                tspan_element.setAttributeNS(null, dy, 18);

                text_node = svgDocument.createTextNode(words[i]);

                tspan_element.appendChild(text_node);

                text_element.appendChild(tspan_element);

            }

        }





    }

]]>

</script>



<text x=10 y=50 id=multiline-text> </text>

It works by adding tspan elements to the text element and then adding text to each of them.

The result is something like:

<text>

  <tspan>Whatever text</tspan>

  <tspan>you want here.</tspan>

</text>

In order for getComputerTextLength to work, you need to create the tspan (or text) element first and make sure it is in DOM. Also note that in order to add text to a tspan element, you need to use createTextNode() and append the result.