JavaScript – SVG：使用getComputedTextLength来包装文本

我正在通过构建一个文本字符串来包装文本,并使用’getComputedTextLength’来查找文本何时超出了允许的宽度.但是,我找不到一种简单的方式来逐步构建可以使用getComputedTextLength的文本.
总体思路是：

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];
     ...
  }

任何人都可以告诉我如何让这个工作？大概’str’被复制而不是在’obj’中引用,但是我也尝试在循环中放置’obj.removeChild(str)’和’obj.appendChild(str)’,但是appendChild崩溃.我也尝试过围绕documentElement.appendChild移动的各种组合,并删除obj并重新附加它等等.

谢谢 –
人

解决方法

这应该工作：

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>

它通过向文本元素添加tspan元素,然后向其中添加文本来起作用.

结果是这样的：

<text>
  <tspan>Whatever text</tspan>
  <tspan>you want here.</tspan>
</text>

为了使getComputerTextLength工作,您需要首先创建tspan(或text)元素,并确保它在DOM中.另请注意,为了向tspan元素添加文本,您需要使用createTextNode()并附加结果.