SVG：使用getComputedTextLength来包装文本 [英] SVG: using getComputedTextLength to wrap text

问题描述

我正在尝试通过构建文本字符串来包装文本，并使用 getComputedTextLength 来查找文本何时超出允许的宽度。但是，我找不到一种简单的方法来逐步构建可用于 getComputedTextLength 的文本。

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.

一般的想法是：

  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 并重新附加它，等等。

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.

推荐答案

这应该有效：

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>

它的工作原理是将tspan元素添加到文本元素中，然后为每个元素添加文本。

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

结果类似于：

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

为了让getComputerTextLength工作，你需要先创建tspan（或text）元素然后make确定它在DOM中。另请注意，为了向tspan元素添加文本，您需要使用createTextNode（）并附加结果。

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.

这篇关于SVG：使用getComputedTextLength来包装文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！